[英]How to position sub-menu directly below parent UL (unorder list)?
我正在尝试使用列表创建具有固定位置和子菜单的导航栏。 我无法使子菜单位于其父UL的正下方。 它走到最左边。 我需要在以下代码中添加什么? 抱歉,如果这太初学者...
<?php
//Navigation Bar
echo '<div id="nav_main">';
echo '<ul>';
echo '<li><a href="' . $defaultURL . '">LOGO</a></li>';
echo '<li><a href="logout.php">Category</a></li>';
if($login=='1'){
echo '<li><a href="#">Home</a></li>';
echo '<li><a href="#">Settings</a>'
.'<ul>'
.'<li><a href="logout.php">Log Out</a></li>'
.'</ul>'
.'</li>';
}else{
echo '<li><a id="register" href="signup.php">Join Today</a></li>';
echo '<li><a href="login.php">Sign in</a></li>';
}
echo '</ul>';
echo '</div>';
//Navigation Bar
?>
CSS:
#nav_main ul {
position:fixed;
margin: 0;
top: 0;
left: 0;
width: 100%;
padding: 12px;
background-color: #88B541;
box-shadow: 2px 2px 1px #888888;
-moz-box-shadow: 2px 2px 1px #888888;
-webkit-box-shadow: 2px 2px 1px #888888;
}
#nav_main li {
list-style-type: none;
display: inline;
font-size: 15px;
font-weight: bold;
padding: 20px;
}
#nav_main a {
color: #FFFFFF;
text-decoration: none;
}
#nav_main a:hover {
padding: 12px 8px;
background: #52A423;
}
#nav_main ul ul {
display: none;
width: auto;
}
#nav_main ul li:hover > ul {
margin: 45px;
display: block;
padding-left: 50px;
padding-right: 50px;
}
#nav_main ul ul li {
float: none;
}
上次修订的CSS:
ul.nav {
position:fixed; margin: 0; top: 0; left: 0; width: 100%;
background-color: #88B541; box-shadow: 2px 2px 1px #888888;
-moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888;
}
ul.nav li a {
display: block; text-decoration: none; color: #FFFFFF; font-weight: bold; padding: 12px; font-size: 15px;
}
ul.nav > li {
float: left; position: relative;
}
ul.nav li a:hover {
background: #52A423;
}
ul.nav > li ul {
display: none; position: absolute; left: -1px; width: 150px; background-color: #88B541; box-shadow: 2px 2px 1px #888888;
-moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888;
}
ul.nav > li:hover ul { display: block; }
ul.nav > li ul li { display: block; }
子菜单左侧有空白,我将其更改为“ display:inline-block;”。 到“ ul.nav> li”中的“ float:left”,似乎没有用。 我也意识到子菜单没有在IE10中显示? 我的CSS一定有问题...
为什么不尝试使用这种HTML / CSS结构?
<ul class="nav">
<li>
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.