CSS- ckeck并在li有ul的地方添加右箭头 [英] CSS- ckeck and add right arrow where li has ul
本文介绍了CSS- ckeck并在li有ul的地方添加右箭头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想添加css右箭头，其中ul有一个ul孩子？下面是三角形右边的CSS。我想添加我的菜单，以便用户知道这个菜单有子菜单。
如何在纯css中检测
我想在三角形下面添加右箭头到我的CSS。 Plz help。
菜单的php代码：
< ？php
$ stmt = $ pdo-> query（'SELECT * FROM`category` where parent_id` = 0'）;
$ stmt-> execute（）;
？>
< ul class =top-level-menu>
<？php while（$ menu1 = $ stmt-> fetch（））{？>
< li>< a href =<？php echo $ menu1 ['category_link']。\\\
;？>><？php echo $ menu1 ['product' ]。 \\\
; ？>< / A>
<？php $ stmt1 = $ pdo-> prepare（'SELECT * FROM category WHERE parent_id =？'）;
$ stmt1-> execute（[$ menu1 ['id']]）;
？>
< ul class =second-level-menu>
<？php while（$ menu2 = $ stmt1-> fetch（））{？>
< li>< a href =<？php echo $ menu2 ['category_link']。\\\
;？>><？php echo $ menu2 ['product' ]。 \\\
; ？>< / A>
<？php
$ stmt2 = $ pdo-> prepare（'SELECT * FROM category WHERE parent_id =？'）;
$ stmt2-> execute（[$ menu2 ['id']]）;
？>
< ul class =third-level-menu>
<？php while（$ menu3 = $ stmt2-> fetch（））{？>
< li>< a href =<？php echo $ menu3 ['category_link']。\\\
;？>><？php echo $ menu3 ['product' ]。 \\\
; ？>< / A>
< / li>
<？php}？>
< / ul>
< / li>
<？php}？>
< / ul>
< / li>
<？php}？>
< / ul>
菜单栏css
<风格>
/ *菜单样式* /
。三级菜单
{
position：absolute;
top：0;
right：-220px;
width：220px;
list-style：none;
padding：0;
保证金：0;
display：none;
}
.third-level-menu> li
{
height：30px;
背景：＃999999;
}
.third-level-menu> li：hover {background：#CCCCCC; }
。第二级菜单
{
position：absolute;
top：30px;
剩下：0;
width：200px;
list-style：none;
padding：0;
保证金：0;
display：none;
}
.second-level-menu> li
{
position：relative;
height：30px;
背景：＃999999;
}
.second-level-menu> li：hover {background：#CCCCCC; }
.top-level-menu
{
list-style：none;
padding：0;
保证金：0;
}
.top-level-menu> li
{
position：relative;
float：left;
height：30px;
width：100px;
背景：＃999999;
}
.top-level-menu> li：hover {background：#CCCCCC; }
.top-level-menu li：hover> ul
{
/ *悬停时显示下一级菜单* /
display：inline;
}
/ *菜单链接样式* /
.top-level-menu a / *适用于多层次内的所有链接menu * /
{
font：bold 14px Arial，Helvetica，sans-serif;
颜色：#FFFFFF;
text-decoration：none;
padding：0 0 0 10px;
/ *使链接覆盖整个列表item-container * /
display：block;
line-height：30px;
}
.top-level-menu a：hover {color：＃000000; }
< / style>
检查我的菜单，哪里没有箭头，哪里有ul
解决方案
CSS，但正如你用jQuery标记过的那样，我们可以使用：has（）选择器来完成相同的行为。基本上，如果一个LI el包含一个UL，我们应该假设UL是一个子菜单，并且我会将'js-has-a-submenu'类添加到我们用于菜单项的锚点el。我用'js-'作为前缀，仅仅是为了反映它不是一个静态应用类，但我们只能通过js使用它。
代码这里实际上是从我在引用中引用的菜单示例中获得的，但是后来我注意到他们将向下箭头硬编码到菜单中，这从我的理解中确实打破了您正在尝试执行的操作。所以我删除了向下箭头，并使用jQuery来应用这个类。要了解菜单本身，请阅读 此 ，因为我认为它做得很好（不是粉丝的粉丝，而是它的CSS）。
data-lang =jsdata-hide =falsedata-console =truedata-babel =false> $（li：has（ul））。find（a：eq（0））。addClass（js-has-a-submenu） ;
body {background：＃333;} clearfix：在{display：block; clear：both;} / * ----- Menu Outline ----- * /。menu-wrap {width：100％; box-shadow：0px 1px 3px rgba（0，0，0，0.2）;背景：＃3e3436;}。menu {width：1000px; margin：0px auto;}。menu li {margin：0px; list-style：none; font-family：'Ek Mukta';}。menu {text-decoration：none;过渡：全部线性0.15s;颜色：＃919191;}。menu li：hover> a，.menu .current-item> {text-decoration：none;颜色：＃be5b70;}。menu .arrow {font-size：11px; line-height：0％;} / * -----顶层----- * /。menu> ul> li {float：left;显示：inline-block;位置：相对; font-size：19px;}。menu> ul> li> {padding：10px 40px;显示：inline-block; text-shadow：0px 1px 0px rgba（0，0，0，0.4）;}。menu> ul> li：悬停> a，.menu> ul> .current-item> {背景：＃2e2728;} / * -----底层----- * /。菜单li：悬停.sub-menu {z-index：1; opacity：1;}。子菜单{width：160％; padding：5px 0px;位置：绝对;顶部：100％; left：0px; z-index：-1;不透明度：0;过渡：不透明线性0.15s; box-shadow：0px 2px 3px rgba（0，0，0，0.2）;背景：＃2e2728;}。子菜单li {display：block; font-size：16px;}。子菜单li a {padding：10px 30px; display：block;}。sub-menu li a：hover，.sub-menu .current-item a {background：＃3e3436;}。js-has-a-submenu :: after {content：\2193; }
< script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div class =menu-wrap> < nav class =menu> < ul class =clearfix> < li>< a href =＃>主页< / a>< / li> <李> < a href =＃>电影< / a> < ul class =sub-menu> < li>< a href =＃>立即在电影院< / a>< / li> < li>< a href =＃>即将推出< / a>< / li> < li>< a href =＃>在DVD / Blu-ray上< / a>< / li> < li>< a href =＃>放映时间& amp; amp; amp; amp; amp; amp;门票和LT; / A>< /锂> < / UL> < /锂> < li>< a href =＃> T.V。展示和LT; / A>< /锂> < li>< a href =＃>照片< / a>< / li> < li>< a href =＃>网站帮助< / a>< / li> < / UL> < / nav>< / div>
I want to add css right arrow where ul has a ul child? Below is triangle right css. I want to add in my menu so that users know this menu has sub menu.
How is it possible to detect in pure css if a li has children of ul.children?
I want to add below triangle-right arrow to my css. Plz help.
php code for the menu:
<?php
$stmt = $pdo->query('SELECT * FROM `category` where `parent_id` = 0');
$stmt->execute();
?>
<ul class="top-level-menu">
<?php while($menu1 = $stmt->fetch()){ ?>
<li><a href="<?php echo $menu1['category_link'] . "\n"; ?>"><?php echo $menu1['product'] . "\n"; ?></a>
<?php $stmt1 = $pdo->prepare('SELECT * FROM category WHERE parent_id = ?');
$stmt1->execute([$menu1['id']]);
?>
<ul class="second-level-menu">
<?php while($menu2 = $stmt1->fetch()){ ?>
<li><a href="<?php echo $menu2['category_link'] . "\n"; ?>"><?php echo $menu2['product'] . "\n"; ?></a>
<?php
$stmt2 = $pdo->prepare('SELECT * FROM category WHERE parent_id = ?');
$stmt2->execute([$menu2['id']]);
?>
<ul class="third-level-menu">
<?php while($menu3 = $stmt2->fetch()){ ?>
<li><a href="<?php echo $menu3['category_link'] . "\n"; ?>"><?php echo $menu3['product'] . "\n"; ?></a>
</li>
<?php } ?>
</ul>
</li>
<?php } ?>
</ul>
</li>
<?php } ?>
</ul>
css for the menu bar
<style>
/* Menu Styles */
.third-level-menu
{
position: absolute;
top: 0;
right: -220px;
width: 220px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 200px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 100px;
background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
</style>
check my menu where there is no arrow where li has ul
解决方案
So there's really no parent selector in CSS, but as you've tagged this with jQuery, we can use the :has() selector to do much the same behavior. Basically, if a LI el contains a UL, we should assume the UL is a submenu, and I will add the 'js-has-a-submenu' class to the anchor el that we're using for the menu items. I've prefixed it with 'js-' simply to reflect that it isn't a statically applied class, but one we'll only use via js.
The code here is actually taken from the menu example I'd referenced in the commments, but then I noticed they'd hard-coded the down-arrow into the menu, which really breaks what you're trying to do, from what I understand. So I removed the down arrow, and used jQuery to apply the class. To understand the menus themselves, please do go read this, as I think it does pretty well (not a fan of the pink, but its css).
$("li:has(ul)").find("a:eq(0)").addClass("js-has-a-submenu");
body {
background: #333;
}
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 1000px;
margin: 0px auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
text-decoration:none;
transition: all linear 0.15s;
color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: #be5b70;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #3e3436;
}
.js-has-a-submenu::after {
content: " \2193";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li>
<a href="#">Movies </a>
<ul class="sub-menu">
<li><a href="#">In Cinemas Now</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">On DVD/Blu-ray</a></li>
<li><a href="#">Showtimes & Tickets</a></li>
</ul>
</li>
<li><a href="#">T.V. Shows</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Site Help</a></li>
</ul>
</nav>
</div>
这篇关于CSS- ckeck并在li有ul的地方添加右箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
