uMy child pages are showing up in a horizontal line under the parent page link in the navigation. I can't figure out where the css is wrong. You can see what I'm talking about here (the links under Sample Page are the ones in question): http://sitetest3.talktothedogs.com.
HTML for Navigation (which is auto-generated by WP)
<div id="nav">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Sample Page
<ul class='children'>
<li class="page_item page-item-4">Testing page 2</li>
<li class="page_item page-item-6">Testing page 1</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS Code
.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { }
.menu li.current_page_item a:hover{ }
Any help would be appreciated. Thanks in advance!
Change your CSS as follows:
.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }
Here is how this would look
Your first line in the CSS:
.menu, .menu ul { ... }
is setting the height of both the <div class="menu"> AND the <ul> within that .menu to the same height. The entire menu is constrained to a container that's 29px high.
Related
I was adapting a css stylesheet for a dropdown-menu. I am having troubles with centering the boxes for the sub-menu. It currently looks like
#nav{
list-style:none;
margin:0;
padding:120px 100px;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
left:-9999px;
margin:0;
padding:0;
text-align:center;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
background:#fff;
}
#nav ul a{
white-space:nowrap;
display:block;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
}
But I would like that the sub-boxes are centered with respect to the box on the higher level. How Can I achieve that?
Make immediate (top level) lis into relative containers
Left position nested uls 50% within the newly-defined relative container and translate them -50% of their own size
Remove left:-9999px; on nested uls and toggle display: none/block
#nav > li {
position: relative;
}
#nav {
list-style: none;
margin: 0;
padding: 20px 100px;
text-align: center;
}
#nav li {
position: relative;
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
}
#nav ul {
display: none;
position: absolute;
margin: 0;
padding: 0;
left: 50%;
transform: translateX(-50%);
}
#nav ul li {
display: block;
}
#nav li:hover ul {
display: block;
}
#nav li:hover a {}
#nav li:hover ul a {
text-decoration: none;
background: none;
}
#nav li:hover ul a:hover {
background: #fff;
}
#nav ul a {
white-space: nowrap;
display: block;
}
a {
color: #c00;
text-decoration: none;
font-weight: bold;
}
<ul id="nav">
<li>One
<ul>
<li>Sub One</li>
<li>Sub Two</li>
</ul>
</li>
<li>Two
<ul>
<li>Sub One</li>
<li>Sub Two</li>
</ul>
</li>
<li>Three
<ul>
<li>Sub One</li>
<li>Sub Two</li>
</ul>
</li>
</ul>
jsFiddle
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am a beginner in programming.Now i am assigned with the task of making a site with html5 and css.The issue what i am facing is
I have a horizontal menu bar with vertical sub menu will come on hover.
3 main tabs home ,health,safety
under that i have sub menus
when i am clicking all main menus are working fine.
But when clicking home -health-health sub menu(it works fine) -safety sub menu(it wont work fine)
this is error i am getting when i click fire hazards directly after health.
No webpage was found for the web address:
http://file:///C:/Users/DELL/Desktop/a/health/safety/fire_hazards.html
the web address shown above is incorrect.
i have kept fire hazards in safety-firehazards folder
and not in health -safety-firehazards folder
why is the path is showing wrong
<div id="menu"> <!--starts of menu-->
<ul >
<li>Home</li>
<li>Health
<ul>
<li>Personal Hygiene`enter </li>
<li>Food Hygeiene</li>
</ul>
</li>
<li>Safety
<ul>
<li>Fire Hazards</li>
<li>Cooking Gas</li>
</ul>
</li>
</ul>
</div><!--end of menu-->
CSS
#menu {
display:block;
position:relative;
width: 960px;
height: 50px;
background-color: #fff;
margin: 0px auto;
border:1px solid #000;
}
#menu ul li a:hover{
color:#c1d82f;
}
#menu ul .current {
color: #b13932;
}
#menu li:hover ul{
display:block;
}
#menu ul {
margin: 0px;
padding: 4px 0px;
}
#menu li {
float:left;
position:relative;
list-style-type:none;
}
#menu li a {
display: block;
padding:10px 45px;
}
#menu ul :after{
content:".";
height:0px;
clear:both;
visibility:hidden;
}
#menu ul ul{
position:absolute;
left:0px;
display:none;
}
#menu ul ul li {
width:100%;
}
#menu ul ul li a{
border-right:none;
padding:5px 5px;
}
/* end of menu */
}
You can try this code also:
#menu {
width:100%;
position:relative;
background:#ccc;
}
nav {
position:relative;
}
nav ul {
margin:0;
padding:0;
}
nav ul li {
margin:0;
padding:0;
list-style:none;
display:inline-block;
position:relative;
}
nav ul li a {
font:bold 12px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#333;
padding:7px 10px;
display:inline-block;
text-decoration:none;
}
nav ul li:hover > a {
text-decoration:none;
color:#005ba0;
}
nav ul li a.current {
background:#005ba0;
color:#fff;
}
nav ul ul {
min-width:200px;
position:absolute;
top:100%;
z-index:666;
background:#eee;
display:none;
}
nav li:hover > ul {
display:block;
}
nav ul ul ul {
left:100%;
top:0;
}
nav ul ul li {
display:block;
width:100%;
}
nav ul ul a {
padding:7px 10px;
display:block;
color:#777;
border-bottom:1px solid #ddd;
text-align:left;
}
nav ul ul a:hover {
background:#ddd;
}
nav ul ul a.current {
background:#dddd;
color:#005ba0;
}
<div id="menu">
<nav>
<ul>
<li>Home</li>
<li>Health
<ul>
<li>Personal Hygiene`enter</li>
<li>Food Hygeiene</li>
</ul>
</li>
<li>Safety
<ul>
<li>Fire Hazards</li>
<li>Cooking Gas</li>
</ul>
</li>
</ul>
</nav>
</div>
Would like the last submenu of this css drop-down menu to be right-aligned: https://jsfiddle.net/mishka00/p6cyy5p7/. It is currently right-aligned (incorrectly) just to show the desired end result. Tried various combinations of right:0 and left:auto, but couldn't figure it out.
See https://jsfiddle.net/sjmcpherso/b1pyqLpc/
#nav ul li:last-child ul {
right:0px;left:auto;
text-align:right;
background:white;
}
Plus add position:relative to the parent
add position: relative for #nav ul li
add right: 0; for #nav ul li:last-child ul
#nav ul {
padding:0;
margin:0;
list-style:none;
}
#nav ul li {
float:left;
border:1px solid #fff;
margin:0 30px;
position: relative;
}
#nav ul li a {
display:block;
padding:10px 6px;
position:relative;
}
#nav ul li:hover {
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
border-top:1px solid #E9E9E9;
}
#nav ul li ul {
display:none;
}
#nav ul li:hover ul {
display:block;
position:absolute;
z-index: 10;
background:#fff;
width:150px;
border:0;
}
#nav ul li ul li {
display:block;
position:relative;
border:none;
float:none;
margin:0;
left:-1px;
}
#nav ul li ul li:hover {
border:none;
background:#F7F9FB;
}
#nav ul li ul li a {
padding:10px;
border:1px solid #E9E9E9;
}
#nav ul li:last-child ul {
right: 0;
background:white;
}
#nav ul li:last-child ul li{
left:1px;
}
<div id="nav">
<ul>
<li>Menu1
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
<li>Menu3
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
</ul>
</div>
<div style='clear: both;margin-bottom:5px;'></div>
<div style='border-top:1px solid navy;'></div>
just add this code to your css
#nav ul li:last-of-type {
float: right;
}
I have created a Menu list.
It is working perfectly on Chrome and Firefox but misaligned in IE8
Chrome Snapshot :-
http://postimg.org/image/g6uf9zikr/
IE8 Snapshot :-
http://postimg.org/image/u6o3pzasz/
Here's my CSS ------
div.menu {
background-color:#383838;
height:65px;
margin-bottom:20px;
}
div.menu ul {
vertical-align:middle;
list-style:none;
margin:0;
padding:0;
}
div.menu ul li {
float:left;
display:block;
}
div.menu ul li a {
color:#FFFFFF;
display:block;
float:left;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
padding:24px 20px 22px;
text-transform:uppercase;
text-decoration:none;
}
div.menu ul li a:hover {
text-decoration:underline;
background-color:#2B2B2B;
}
div.menu ul li:hover ul {
display:block;
}
div.menu ul li ul {
vertical-align:middle;
text-align:center;
float: none;
list-style: none;
display: none;
position:absolute;
z-index:999;
margin-top:60px;
background-color:#383838;
opacity:0.8;
}
div.menu ul li ul li{
float: none;
vertical-align:middle;
background-color:#383838;
padding:15px;
}
div.menu ul li ul li a {
color:#FFFFFF;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
text-transform:uppercase;
padding:0px;
}
div.menu ul li ul li a:hover {
text-decoration:underline;
}
div.menu ul li ul li:hover{
background-color:#2B2B2B;
opacity:1.0;
}
<div class="menu">
<ul>
<li> HOME </li>
<li>CONTROLLER
<ul>
<li> CONTROLLER-1</li>
<li> CONTROLLER-2</li>
</ul></li>
<li>IOS BPL ZIO
<ul>
<li> IOS BPL ZIO-1</li>
<li> IOS BPL ZIO-2</li>
</ul></li>
</ul>
</div>
Please help me to resolve the issue.
Remove float: left from the links in the menu. This will cause those links to fill the entire row, and the ul of the submenu will not be shown next to it.
To counter that gap that causes, remove the margin-top from the submenu ul.
That should do the trick, although I don't have IE8 at hand to test it.
div.menu {
background-color:#383838;
height:65px;
margin-bottom:20px;
}
div.menu ul {
vertical-align:middle;
list-style:none;
margin:0;
padding:0;
}
div.menu ul li {
float:left;
display:block;
}
div.menu ul li a {
color:#FFFFFF;
display:block;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
padding:24px 20px 22px;
text-transform:uppercase;
text-decoration:none;
}
div.menu ul li a:hover {
text-decoration:underline;
background-color:#2B2B2B;
}
div.menu ul li:hover ul {
display:block;
}
div.menu ul li ul {
vertical-align:middle;
text-align:center;
float: none;
list-style: none;
display: none;
position:absolute;
z-index:999;
background-color:#383838;
opacity:0.8;
}
div.menu ul li ul li{
float: none;
vertical-align:middle;
background-color:#383838;
padding:15px;
}
div.menu ul li ul li a {
color:#FFFFFF;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
text-transform:uppercase;
padding:0px;
}
div.menu ul li ul li a:hover {
text-decoration:underline;
}
div.menu ul li ul li:hover{
background-color:#2B2B2B;
opacity:1.0;
}
<div class="menu">
<ul>
<li> HOME </li>
<li>CONTROLLER
<ul>
<li> CONTROLLER-1</li>
<li> CONTROLLER-2</li>
</ul></li>
<li>IOS BPL ZIO
<ul>
<li> IOS BPL ZIO-1</li>
<li> IOS BPL ZIO-2</li>
</ul></li>
</ul>
</div>
I want to make a small website for myself and so I ask this question as a beginner. I cannot succeed to have the submenu contain another background when hovering the main menu.
HTML:
<div id="nav">
<ul class="sub1">
<li><h2>Home</h2></li>
<li><h2>About</h2><!---id="onlink"--->
<ul class="sub2">
<li>Us</li>
<li>Our product</li>
</ul>
</li>
</ul>
</div>
CSS:
#nav{
width:100%;
height: 60px;
padding-top: 20px;
padding-bottom: 10px;
}
#nav ul{
margin:0;
padding:0;
width: 60%;
margin: auto;
}
#nav ul li{
margin:0;
padding:0;
list-style: none;
float:left;
position:relative;
background:transparent url(EN/Button_menu_unselected.png);
}
#nav ul li ul li{
background:aqua; /*Test that doesn't work*/
}
#nav ul li a{
text-align:center;
text-decoration:none;
height:20px;
width:100px;
padding:10px;
display:block;
color:#003300;
}
#nav ul ul{
position:absolute;
visibility:hidden;
}
#nav ul li:hover ul{
visibility:visible;
}
#nav ul li:hover a{
background-image: url(EN/Button_menu_rollover.png);
}
The drop down items get the same format as the button called "Button_menu_rollover", which gives me a very bad result.
The code:
#nav ul li:hover a{
background-image: url(EN/Button_menu_rollover.png);
}
is applied to all elements and sub-elements.
This fixes it, but this code does not work on IE6:
#nav ul li:hover > a{
background: #fff;
}
Or you may use Javascript for HOVER effect to get exact results.