Is there a particular way to make a <ul> a height? I have this structure:
<ul class="dropdown">
<li></li>
<li></li>
<li></li>
<li>
<ul id="sub_menu1"> // I have 4 of these
<li></li>
<li></li>
</ul>
</li>
</ul>
CSS:
ul.dropdown {
font-family: 'CapsuulaRegular', Arial, sans-serif;
position: relative;
padding: 0;
margin: 0;
z-index: 1;
}
ul.dropdown li a {
color: #b38201;
font-size: 18px;
}
ul.dropdown li {
display: block;
float: left;
color: #b38201;
font-weight: normal;
text-transform: uppercase;
padding: 38px 10px 12px 7px;
margin-left: 2px;
}
ul.dropdown a:hover {
color: #002565;
background-image: url(../images/menu-hover.png);
background-position: 50% 100%;
background-repeat: no-repeat;
}
.navSelected {
color: #002565;
background-image: url(../images/menu-hover.png);
background-position: 50% 100%;
padding:0;
margin:0;
background-repeat: no-repeat;
}
ul.dropdown a:active {
color: #ffa500;
}
ul.dropdown li a {
padding: 38px 7px 12px 7px;
}
ul.dropdown li:last-child a {
border-right: none;
}
/* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
color: black;
position: relative;
}
ul.dropdown li.hover a {
color: black;
}
/* LEVEL TWO */
#sub_menu1 {
width: 175px;
position: absolute;
left: -175px;
}
#sub_menu2 {
width: 175px;
position: absolute;
left: 0px;
}
#sub_menu3 {
width: 175px;
position: absolute;
left: 175px;
}
#sub_menu4 {
width: 175px;
position: absolute;
left: 200px;
}
ul.dropdown ul {
visibility: hidden;
position: relative;
top: 100%;
left: 0px;
font-size: 10px !important;
padding: 0;
margin: 0;
display: block;
}
ul.dropdown ul li {
background: #ccc;
}
ul.dropdown ul li {
font-weight: normal;
background: #f1f3f7;
color: #000;
/*border-bottom: 1px solid #ccc;*/
float: none;
padding: 10px;
margin: 0;
text-transform: none;
}
I having trouble making the <ul> that are hovered the same height. The go depending on what content is in them.
I want all the menus to be the same height, or within a wrapper of fixed height/width..
does this solve your question?
ul { height: 150px; }
if you apply this, all of your ul's will have the height of 150 pixels.
Edit
Well, you're using floating. Floating elements are ignored in the flow of the document. To overcome this problem you should add a overflow: hidden; to your ul.dropdown
Related
Having trouble with how the drop-down-menu looks like when the mouse hovers over it. Note that the problem only started when I converted my nav li's from fixed to fluid. (instead of specifying it in px I specify it in %)
Here is my code:
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 248, 228, 0.95);
border: 2px solid #585858;
}
a:link {
color: #e07400;
}
a:visited {
color: gray;
}
a:hover,
a:focus {
font-style: italic;
}
header img {
float: left;
width: 100%;
max-width: 136.078px;
}
.orange_header {
color: #e07400;
}
header h1 {
margin: 0;
font-size: 200%;
text-shadow: 2px 1px 1px black;
/*text-align: center;*/
padding-left: 7em;
padding-top: 0.7em;
padding-bottom: 0.5em;
}
/*====================NAV MENU========================*/
#nav_menu a {
margin: 0;
}
#nav_menu a.current {
color: white;
display: block;
background-color: #a78349;
}
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 34px;
}
#nav_menu ul li {
float: left;
/*width:165.985px;*/
/*(800-136.06)/4 - fixed layout - uncomment to see that the dropdown menu at the lessons tab looks fine*/
width: 20.748125%;
/* 165.985/800*100 - here the dropdown menu looks strange...how to I fix this?*/
}
#nav_menu ul li a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.5em 0;
margin: 0;
background-color: #ab6b06;
color: white;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover>ul {
display: block
}
#nav_menu>ul::after {
content: "";
clear: both;
display: block;
}
<body>
<header>
<img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
<h1 class="orange_header">Annemie's Guitar School</h1>
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Useful links</li>
<li>Lessons
<ul>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ul>
</li>
<li>Bio</li>
</ul>
</nav>
</body>
Change this css:
#nav_menu ul li {
float: left;
/* width: 165.985px; */
width: 20.748125%;
}
to this
#nav_menu > ul > li {
float: left;
/* width: 165.985px; */
width: 20.748125%;
}
Why is the last list item in the submenu lower than the rest in Chrome, but aligned in Firefox?
JSFIDDLE with font turned red for visibility
ACTUAL SITE
I have tried everything I can think of with padding, margin, vertical align, last child, etc. Baffled. Thank you.
#hmenuWrapper {
width: 100%;
}
#hmenu, #hmenu ul, #hmenu ul li, #hmenu ul li a {
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Arial', sans-serif;
}
#hmenu:before, #hmenu:after, #hmenu > ul:before, #hmenu > ul:after {
content: '';
display: table;
}
#hmenu:after, #cssmenu > ul:after {
clear: both;
}
#hmenu {
position: relative;
top: 0px;
left: 180px;
zoom: 1;
height: 60px;
width: 740px;
background: url(../media/images/bottom-bg.png) repeat-x center bottom;
border-radius: 2px;
}
#hmenu ul {
background: url(../media/images/nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#hmenu ul li {
float: left;
list-style: none;
}
#hmenu ul li a {
display: block;
height: 37px;
padding: 17px 14px 0;
margin: 4px 0px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#hmenu ul li:first-child a {
margin: 4px 0px 0 0;
}
#hmenu ul li:last-child {
background-color: #168b09;
}
#hmenu ul li a:hover {
background: url(../media/images/colorHover.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 20px;
color: #616161;
text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
opacity: 1;
}
#hmenu ul li.active a {
background: url(../media/images/color.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 20px;
color: #616161;
text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
opacity: 1;
}
#nav-wrap {
position: relative;
left: 180px;
top: -3px;
zoom: 1;
height: 40px;
width: 740px;
float: left;
background: url(../media/images/colorinv.png);
}
#nav {
display: inline;
height: 40px;
width: 100%;
}
#nav a:hover {
color: #444444;
text-decoration: none;
}
#nav li:hover {
background: url(../media/images/nav-bginvHover.png);
}
#nav a li:hover {
color: #444444;
}
#nav ui li a {
height: 40px;
width: 185px;
}
.nav-item {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
width: 185px;
list-style-type: none;
color: white;
}
.nav-item a {
height: 40px;
width: 185px;
}
#nav li.nav-sel {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
width: 185px;
list-style-type: none;
color: white;
font-family: 'Arial', sans-serif;
background: url(../media/images/nav-bginv.png);
}
#nav li.nav-sel a {
color: white;
height: 40px;
width: 185px;
line-height: 40px;
}
Remove display: inline from #nav, it's not needed: https://jsfiddle.net/ry5mLkaL/1/
Also, your HTML is invalid starting at line 42. You should not wrap a List Item with an Anchor (or anything). The anchor should be inside of the List Item.
<ul id="nav">
<li class="nav-item">Company Services</li>
<li class="nav-item">Sky Advantages</li>
<li class="nav-item">Customer Recognition</li>
<li class="nav-item">News Releases</li>
</ul>
to
<ul id="nav">
<li class="nav-item">Company Services</li>
<li class="nav-item">Sky Advantages</li>
<li class="nav-item">Customer Recognition</li>
<li class="nav-item">News Releases</li>
</ul>
Because of #nav display:inline.
Set it to display:table-row;
Add #nav{padding-left: 0px} to your CSS, see fiddle: https://jsfiddle.net/zjckk9uL/4/
I have a simple vertical hover menu and even when I don't hover over any buttons but the cursor is a little to the right of it, it shows the submenu. When there isn't a submenu the main menu button starts to flicker. I am not entirely sure what is going on and why it is happening. Here is link to show what I mean.
EDIT: Thank you for your responses! Now I'm having a different/almost same problem. The menu doesn't freak out any more, but now there's a bar that sticks out of it and it is still opening the submenus without having to hover over the parent menu. Link to picture here.
Here's my HTML
<div id="divMenu">
<ul>
<li>Home1</li>
<li>Home2
<ul>
<li>Homed</li>
<li>Homee</li>
<li>Homef</li>
</ul></li>
<li>Home3
<ul>
<li>Homeg</li>
<li>Homeh</li>
<li>Homei</li>
</ul></li>
<li>Home4</li>
<li>Home5
<ul>
<li>Homej</li>
<li>Homek</li>
<li>Homel</li>
</ul></li>
<li>Home6</li>
</ul>
</div>
And my CSS
<style type="text/css">
#divMenu {
margin: 0px;
padding: 0px;
}
#divMenu ul {
margin: 0px;
padding: 5px 15px;
}
#divMenu li {
margin: 4px;
padding: 4px;
}
#divMenu li li {
margin: 0px;
padding: 0px;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 25px;
}
#divMenu li {
list-style: none;
position: relative;
background: #000;
}
#divMenu li li {
list-style: none;
position: relative;
background: #000;
left: 95px;
top: -30px;
}
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #fff;
}
#divMenu ul li:hover > a {
background-color: #fff;
color: #000;
}
#divMenu a:hover {
font-weight: normal;
color: #000;
}
</style>
Just remove width:0px from #divMenu ul li:hover > a and #divMenu a:hover from your style.
The problem of the block tripping is because of the width in the block underneath:
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
Just remove that width and it should work.
It's due to the zero width you're applying to the links. You really don't need that.
#divMenu ul li:hover > a {
/*width: 0px;*/
background-color: #fff;
color: #000;
}
#divMenu a:hover {
/*width: 0px;*/
font-weight: normal;
color: #000;
}
#divMenu {
margin: 0px;
padding: 0px;
}
#divMenu ul {
margin: 0px;
padding: 5px 15px;
}
#divMenu li {
margin: 4px;
padding: 4px;
}
#divMenu li li {
margin: 0px;
padding: 0px;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 25px;
}
#divMenu li {
list-style: none;
position: relative;
background: #000;
}
#divMenu li li {
list-style: none;
position: relative;
background: #000;
left: 95px;
top: -30px;
}
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #fff;
}
#divMenu ul li:hover > a {
/*width: 0px;*/
background-color: #fff;
color: #000;
}
#divMenu a:hover {
/*width: 0px;*/
font-weight: normal;
color: #000;
}
<div id="divMenu">
<ul>
<li>Home1</li>
<li>Home2
<ul>
<li>Homed</li>
<li>Homee</li>
<li>Homef</li>
</ul></li>
<li>Home3
<ul>
<li>Homeg</li>
<li>Homeh</li>
<li>Homei</li>
</ul></li>
<li>Home4</li>
<li>Home5
<ul>
<li>Homej</li>
<li>Homek</li>
<li>Homel</li>
</ul></li>
<li>Home6</li>
</ul>
</div>
I have the following code:
/**** DropDown Css ******/
.inner_menu ul#nav > li span {
display: inline-block;
height: 15px;
vertical-align: middle;
width: 20px;
background: url(../images/drp_arw_dwn.png) no-repeat center;
margin-left: 10px;
}
.inner_menu ul#nav > li:hover span {
background: url(../images/drp_arw.png) no-repeat center;
}
.inner_menu ul#nav > li:hover .subnav {
display: block;
}
.subnav {
position: absolute;
padding-top: 18px;
display: none;
left: 50%;
margin-left: -100px;
border-style: solid;
border-width: 5px;
border-color:#2c91da
}
.subnav ul {
background: #333;
width: 200px;
padding-top: 15px;
}
.subnav ul li {
display: block;
margin: 0;
padding: 0 0 0 20px;
}
.subnav ul li a {
color: #fff;
font-size: 18px;
padding-bottom: 5px;
}
.subnav ul li:hover a {
color: #2c91da;
display: block;
}
/****************** Nav Menu *****************/
.header .wrapper:after {
opacity: 0.5;
}
.dashboard_page {
position: relative;
background: #fff;
padding: 42px 0;
}
.dashboard_page .wrapper {
position: relative;
z-index: 9;
}
.dashboard_page:after {
left: 0;
top: 0;
width: 100%;
height: 370px;
position: absolute;
content: "";
background: #f7f8f9;
pointer-events: none;
}
.inner_menu {
margin: 7px 0 0 0;
padding: 0;
display: block;
}
.inner_menu ul#nav {
margin: 0;
padding: 0;
display: inline-block;
border-right: 1px solid #f2f2f2;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}
.inner_menu ul#nav > li {
margin: 0;
padding: 0;
height: 52px;
line-height: 52px;
display: block;
float: left;
border-left: 1px solid #f2f2f2;
position: relative;
}
.inner_menu ul#nav > li > a {
display: block;
color: #2f2f2f;
font-size: 18px;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0 27px;
border-style: solid;
border-width: 5px;
}
.inner_menu ul#nav > li:after {
position: absolute;
width: 38px;
left: 50%;
margin-left: -19px;
content: "";
background: url(../images/menu_arw.png) no-repeat;
height: 20px;
bottom: -35px;
z-index: 9;
display: none;
}
.inner_menu ul#nav > li:hover:after {
display: block;
}
.inner_menu ul#nav > li.active:after {
display: block;
}
<div class="inner_menu">
<div class="toggle"></div>
<ul id="nav">
<li>
Link 1
</li>
<li>
Trackers
<div class="subnav">
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
</ul>
</div>
</li>
</ul>
</div>
The problem is that in internet explorer, when I try to move my cursor below the element to click on the dropdown, it disappears and I am unable to click it.
What am I doing wrong?
The problem was this CSS item:
.header .wrapper:after{ position:absolute; bottom:-33px; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
The attribute bottom should be a higher negative number. -150px worked for me. I changed it to this:
.header .wrapper:after{ position:absolute;
bottom:-150px
; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
Let's break it down:
You hover over '.inner_menu ul#nav > li:hover'
The 'display' is set to 'block' for '.subnav'.
You move your mouse until it moves outside of the actual link (The one that says "Trackers")
The selector '.inner_menu ul#nav > li:hover' no longer applies, since you are no longer hovering over the link.
The background is unset.
If you move the .subnav close to the link (No spaces!) it should work better.
Here is a link to a navigation bar that uses CSS only: http://www.cssnewbie.com/easy-css-dropdown-menus/
You might want to use JavaScript for more advanced functionality.
Some limitations for CSS:
No spaces, if you sub-menu is not RIGHT next to the link to it, it probably won't work (Or would at least be very hard to implement)
No advanced fading, clicking or other events, just hovering.
I have a dropdown menu which isn't showing in front of the elements below it. I have set the ul and it's container to position: absolute; and position: relative; respectively and applied a z-index of 9999 to the dropdown, however it won't work and the dropdown appears behind the div below it.
Please find the CSS below or both the CSS & HTML in this JSFiddle.
#menu {
overflow: hidden;
padding: 0 0 9px 0;
}
#menu ul {
padding-top: 8px;
}
#menu li {
width: 160px;
float: left;
text-align: center;
position: relative;
}
#menu li:after {
width: 1px;
height: 9px;
background: #9098bf;
position: absolute;
top: 5px;
left: 0;
content: "";
}
#menu li:first-child:after {
display: none;
}
#menu li ul li:after {
display: none;
}
#menu li ul:after {
content: "";
height: 1px;
clear: both;
}
#menu > .container > ul > li > ul {
left: 0;
}
#menu li ul {
position: absolute;
right: -100%;
left: 100%;
z-index: 9999;
background-color: #67b9e8;
}
#menu a {
font-size: 10px;
text-transform: uppercase;
line-height: 12px;
color: #22317f;
font-family: 'FuturaBT-Book';
}
#menu a:hover {
text-decoration: none;
color: #67b9e8;
}
.features {
background: #22317f;
padding-top: 38px;
padding-bottom: 33px;
overflow: hidden;
margin-bottom: 44px;
}
.features .left {
width: 640px;
float: left;
border-right: 1px dotted #fff;
color: #fff;
margin-bottom: -3px;
padding-right: 57px;
text-align: justify;
}
h1 {
font-size: 55px;
line-height: 50px;
margin: 10px 0 29px 0;
text-align: left;
letter-spacing: -3px;
font-family: 'FuturaBT-Book';
color: #193889;
}
ul, li {
list-style: none;
}
Your problem is NOT z-index not working. You have added to your #menu overflow:hidden.