I have a navigation bar with 6 elements. The first two of them have an additional dropdown menu, which should be displayed on mouse over. The problem is this menu is displayed when the mouse is over the space of the dropdown menu and not when the mouse is over the navigation bar element.
(if it's not clear you can have a look at www.buscocolegio.com and approach the mouse from bottom to top to the first two elements of the navigation bar, you will see the dropdown menu is displayed before reaching the navigation bar element)
here are the JSP and CSS I have implemented:
<div id="main-nav">
<ul id="navbar" class="main-nav-btn">
<li class="buscador-btn">
Buscador Colegios
<ul>
<li>España</li>
<li>Exterior</li>
</ul>
</li>
<li class="buscador-btn">
Opinión Usuarios
<ul>
<li>Ranking</li>
<li>Comentarios</li>
</ul>
</li>
<li class="criterios-btn">Criterios de Selección</li>
<li class="admision-btn">Admisión por Comunidades</li>
<li class="ayuda-btn">Foro</li>
<li class="contacto-btn">Contacto</li>
</ul>
</div><!--MAIN NAV ENDS-->
and CSS
#CHARSET "UTF-8";
#main-nav {height: 51px;width: 100%;background-color: #204865;}
.main-nav-btn { padding: 0; width: 775px;margin: 0 auto;}
.main-nav-btn li {float: left;text-align: center;line-height: 51px;margin-right: 1px;list-style-type: none;}
.main-nav-btn li a {color: #FFF;text-align: center;text-decoration: none;height: 51px;display: block;vertical-align: 30px;}
.main-nav-btn li:hover{background-position: center -51px;background-repeat: no-repeat;}
li.buscador-btn {height: 51px;width: 140px;background-image: url(../img/botones/buscador_colegios.png);background-repeat: no-repeat;}
li.buscador-exterior-btn {background-image: url(../img/botones/buscador_colegios_exterior.png);background-repeat: no-repeat;height: 51px;width: 185px;}
li.criterios-btn {background-image: url(../img/botones/criterios_btn.png);background-repeat: no-repeat;height: 51px;width: 145px;}
li.admision-btn {background-image: url(../img/botones/buscador_colegios_exterior.png);background-repeat: no-repeat;height: 51px;width: 185px;}
li.ayuda-btn, li.contacto-btn {background-image: url(../img/botones/ayuda_btn.png);background-repeat: no-repeat;height: 51px;width: 76px;}
#navbar li:hover ul, #navbar li.hover ul {display: block;position: absolute;margin: 0;padding: 0;}
#navbar li:hover li, #navbar li.hover li {float: none;}
#navbar li:hover li a, #navbar li.hover li a {background-color: #B2DFEE;border-bottom: 1px solid #fff;color: #000;width: 140px;height: 35px;text-align: left;padding-left: 5px;line-height: 35px;position: relative;z-index: 1;}
#navbar li:hover li a:hover, #navbar li.hover li a:hover {background-color: #009ACD;border-bottom: 1px solid #fff;color: #fff;}
Add this to your CSS
.main-nav-btn li ul {
display:none;
}
FIDDLE DEMO >>
Hope it will help.
Try this :
CSS:
li.buscador-btn > ul{
display:none;
}
li.buscador-btn:hover > ul{
display:block;
}
Related
So i'm having a huge issue with my navigation. I'm trying to add a drop down menu but no matter what I try its not working out. Below is my current HTML/CSS code and if you have any idea how to fix it please help!! I also attached a picture of what i'm actually trying to make it look like.
Here's the HTML
<div class="logo"><img src="images/original/xlablogoheader.gif" width="auto" height="130"/><span> experimental social science laboratory</span></div>
<div class="menu">
<ul>
<li>About
<ul>
<li>Mission</li>
<li> Staff</li>
</ul>
</li>
<li>Participants
</li>
<li>Researchers
</li>
<li>Connect
</li>
</ul>
</div>
</div>
Here's the CSS
/* Menu */
.menu{float:right; padding:0 20px 0 0;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {float:left; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Source Sans Pro', sans-serif;color:#fff; font-size:16px;}
.menu ul li.selected a{color:#000;}
.menu ul li a:hover{color:#000;}
.menu ul ul { display: none; position: absolute; top: 25px }
.menu ul li:hover > ul { display: inherit; color:#000;}
I have modified your code, a little bit, by adding position: relative; to menu class, also some other minor changes, so it works, please check this https://jsfiddle.net/ysmr364m/
I have this code:
<style>
.menypic:hover { transform:scale(1.1,1.1)}
.menu ul {list-style: none;padding: 0px;margin: 0px;}
ul.menu li {display: block;position: relative;float:left;border:0px solid #000;list-style-type: none;}
.menu li ul {display: none;border:0px;}
.menu ul li a {display: block;background: #fff;padding: 5px 5px 5px 5px;text-decoration: none;
white-space: nowrap;color: #000;border:0px; font-family: "Calibri", Times, serif;font-size: 14px;}
.menu ul li a:hover {background: #fff;}
.menu li:hover ul {display: block; position: absolute;border-bottom: solid thin #0066ff;border-left: solid thin #0066ff;border-right: solid thin #0066ff;background: #0066ff}
.menu li:hover li {float: none;}
.menu li:hover a {background: #ffffff;border:0px solid #000;}
.menu li:hover li a:hover {background: #0066ff;border:0px solid #000;color: #fff;text-decoration: none;}
#drop-nav li ul li {border-top: 0px;}
</style>
<ul>
<li class="menu">
<img src="1-4.png" class="menypic">
<ul class="menu">
<li class="menu"> Nyheter </li>
<li class="menu"> 20 1-4 </li>
</ul>
</li>
</ul>
And it works brillantly. When I hover the picture it transform to little bigger, and the new menu comes down. Works perfect. But when I hover the menu, the picture goes back to its old size. Is it possible to hold the transformation as long as I am in the menu?
You can set style for other child elements of (for e.g) menu element, while you are "on" menu element with your mouse cursor.
For e.g you can add:
.menu:hover .menypic { transform:scale(1.1,1.1);}
..and all your elements with .menypic class in .menu will be scaled while element with .menu class is in :hover state.
Here is a working fiddle: https://jsfiddle.net/eukjxuqc/3/
EDIT/UPDATE: After reading comments, I hope this is what you need.
Basically, I think this is what you need (this is not from your code, I created new example just to make things easier to understand):
ul.submenu li:hover ul.menu li, ul.menu li:hover {transform:scale(1.1,1.1);}
Also, new fiddle link: https://jsfiddle.net/Munja/eukjxuqc/5/
Original Question
I have a webpage with a css menu. The problem is that the menu is displaying properly except for menu items wit a submenu. I this case the menu items not displaying consistently and the the submenu is not showing at all.
I have uploaded the page at http://prova.webuda.com/account.html. Such a problem occurs with the menu item ACCOUNT.
Also, I have looked at it with firebug and I have seen that the relavant submenu unsorted list is grayed out, which makes me suppose that there must be some parsing issue. However, from my analysis it should be fine.
What am I doing wrong? Can somebody please help me?
Edit
Css
#mainMenu
{
font-size: 0.85em;
}
#mainMenu ul
{
margin: 0;
padding: 0;
text-transform: uppercase;
}
#mainMenu ul li, #mainMenu ul li:hover
{
height:50px;
float:left;
text-align:center;
font-weight:bold;
font-size:1.7em;
overflow:hidden;
margin-left:1.05em;
margin-right:1.05em;
}
#mainMenu ul li a, #mainMenu ul li span a
{
color:brown;
text-decoration:none;
color:#006;
}
.mainSubMenu
{display:none;}
#mainMenu ul li:hover #mainMenu ul li ul{display:block;}
#mainMenu ul li ul{position: absolute;left:-1px;top:98%;}
#mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}
#mainMenu ul ul{
width:119.7px;
}
Html
<div class="mainMenu" id="mainMenu">
<ul>
<li class="menuItem" id="menuItem1"> Squadra </li>
<li class="menuItem" id="menuItem2"> Biglietti </li>
<li class="menuItem" id="menuItem3"> Abbonamenti </li>
<li class="menuItem" id="menuItem4"> Ritiro </li>
<li class="menuItem" id="menuItem5"> Fidelity Card </li>
<li class="menuItem" id="menuItem7"> <span> Account </span>
<ul class="mainSubMenu">
<li class="subMenuItem"><a class="pureCssMenui" href="profilo.html">Profilo</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="datiFatturazione.html">Dati Fatturazione</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="storicoTifoso.html">Storico Tifoso</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="esci.html">Esci</a></li>
</ul>
</li>
</ul>
</div>
Most significantly the part which is not working is #mainMenu ul li:hover #mainMenu ul li ul{display:block;}
There are a few issues with your CSS. First, the # selector only works for elements that have the id set to that. For example, #menuItem applies styling to any element with id="menuItem". However, your HTML has class="menuItem", so you must use the . selector instead.
Second, when the menu does appear, it appears too far down the page for the user to see, as per #mainMenu ul li ul{position: absolute;left:-1px;top:98%;} and #mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}.
Here are the corrections:
.mainMenu
{
font-size: 0.85em;
}
.mainMenu
{
margin: 0;
padding: 0;
text-transform: uppercase;
}
.mainMenu ul li, .mainMenu ul li:hover
{
height:50px;
float:left;
text-align:center;
font-weight:bold;
overflow:hidden;
margin-left:1.05em;
margin-right:1.05em;
}
.mainMenu ul li a, .mainMenu ul li span a
{
color:brown;
text-decoration:none;
color:.006;
}
.mainSubMenu
{display:none;}
.mainMenu:hover .mainSubMenu {display:block}
.mainMenu ul li ul{position: absolute;left:1px;top:2%;}
.mainMenu ul ul ul{position: absolute;left:2%;top:2px;}
.mainMenu ul ul{
width:119.7px;
}
And a working fiddle: http://jsfiddle.net/Af7SE/
Also, here is another example of a menu like yours.
The first problem is because your last <a> is nested on a <span>, try using:
<li class="menuItem" id="menuItem7">
Account
<ul class="mainSubMenu">
....
</ul>
</li>
And your menu never show because has a problem with the overflow:hidden; and the static width on your submenu, try using the next code, it will show your submenu but you will need make more changes.
#mainMenu ul li:hover ul{display:block;}
instead of
#mainMenu ul li:hover #mainMenu ul li ul{display:block;}
remove all the overflow:hidden because it hide your submenu, I make some modifications for the example:
http://jsfiddle.net/NrA8A/
#mainMenu ul {
margin: 0;
padding: 0;
text-transform: uppercase;
list-style: none; /*remove the bullets*/
}
#mainMenu ul li, #mainMenu ul li:hover {
.....
/*Remove the overflow :hidden*/
}
In design mode in VS the following code has all the buttons on a single row
HTML:
<!-- top -->
<div id="top">
<Label id="validCredentialsMessage" class="float-right" runat="server" ForeColor="Red" Text="" Visible="true"></Label>
<img src="images/logo.png" alt="" />
<div id="top-menu" class="float-right">
<ul class="main">
<li><a id="A1" href="home.aspx" runat="server" class="current"><span>Home</span></a> </li>
<li>
<span>Members</span>
<ul class="sub curved">
<li>Analysis</li>
<li>Results</li>
<li>Performance</li>
</ul>
</li>
<li><span>Blog</span> </li>
<li><span>Contact</span> </li>
<li><span>Account</span> </li>
<li><a id="iLogOut" runat="server" onserverclick ="LogOut_Click"><span>LogOut</span></a></li>
</ul>
</div>
</div>
<!-- //top -->
CSS:
/* top menu */
#top-menu {padding:19px 0 0 0;width:560px;}
#top-menu ul {list-style:none;padding:0;margin:0;}
#top-menu .main li, #top-menu .main li a, #top-menu .main li a span {display:block;float:left;cursor:pointer;}
#top-menu .main li a, #top-menu .main li a span {background:url(../images/top-menu-a.jpg) no-repeat 0 0;}
#top-menu .main li {position:relative;padding-bottom:4px;}
#top-menu.float-left .main li {padding-right:10px;}
#top-menu.float-right .main li {padding-left:10px;}
#top-menu .main li a {background-position:top left;padding:0 0 0 20px;color:#656565;}
#top-menu .main li a span {background-position:top right;height:25px;line-height:25px;text-align:center;padding:0 20px 0 0;font-family:LucidaGrandeBold, Arial, sans-serif;}
#top-menu .main li a:hover {background-position:bottom left;}
#top-menu .main li a:hover span, #top-menu .main li a.current span {background-position:bottom right;}
#top-menu .main li a:hover, #top-menu .main li a.current {color:#5790dc;background-position:bottom left;}
#top-menu .main .current-dynamic > a {color:#5790dc;background-position:bottom left;}
#top-menu .main .current-dynamic > a span {background-position:bottom right;}
#top-menu .sub {background:url(../images/top-menu-sub.jpg) repeat-x #fafafa;position:absolute;top:27px;left:10px;padding:15px 20px 10px 20px;border:1px solid #e0e0e0;min-width:110px;display:none;z-index:50;}
#top-menu.float-left .sub {left:0;}
#top-menu .sub li, #top-menu .sub li a, #top-mnu .sub li a span {display:block;float:none;background:none;padding:0;}
#top-menu.float-left .sub li, #top-menu.float-right .sub li {line-height:25px;padding:2px 0;}
#top-menu .sub li a {font-family:LucidaGrandeRegular, Arial, sans-serif;}
/* -- */
However, when running live the last button wraps even though there's enough room.
It's frustrating as the design view looks correct and only changes live which makes it difficult to track down which settings have an effect. Please can anybody advise a simple way to stop these buttons wrapping onto a new row?
In the first line of your css, #top-menu has a property width: 560px; which causes the buttons to wrap.
Around 605px seems to be the minimum setting here as it is the space needed by the buttons.
Check this jsFiddle.
I want a menu with a mouseover show property Inside it I want to use a second unordered list to show the second hidin menu. The problem is that my first rule overwrites the second menus properties and all list items show .
This is my menu html.
<ul id="menu">
<li class="current">ANASAYFA</li>
<li>HAKKIMIZDA</li>
<li>HİZMETLERİMİZ
<ul>
<li>Eğitim Hizmetlerimiz
<ul class="menu2">
<li class="current">Ygs-Lys hazırlık programları</li>
<li>Sbs'ye Hazırlık programı'</li>
<li>Ana sınıg 1'e 1 test programı</li>
<li>Okul destek programı</li>
</ul>
</li>
<li>Neurofeedback</li>
<li>Bioofeedback</li>
</ul>
</li>
<li>GALERİ</li><li>STYLINGS
<li>SANAL TUR</li>
<li>BİZE ULAŞIN
<ul>
<li>İletişim Formu</li>
<li>İletişim Bilgileri</li>
</ul>
</li>
</ul>
And this is my css file for menu orginal and menu2 nested ul
#sidebar #sidebar-content #menu2 {margin: 0px auto;width: 100%;z-index: 30;float: left;}
#sidebar #sidebar-content #menu2 li {line-height: 32px;text-align: center;width: 100%;background-image: url('../images/menu_li.png');
background-repeat: no-repeat;background-position: bottom center;clear: left;float: left;color: #999999;}
#sidebar #sidebar-content #menu2 li a, #sidebar #sidebar-content #menu2 .current ul li a {font-size: 12px;font-weight: normal;display: block;color: #999999;}
#sidebar #sidebar-content #menu2 li:hover{background-image: url('../images/menu_li_hover.png');}
#sidebar #sidebar-content #menu2 li a:hover, #sidebar #sidebar-content #menu2 .current a, #sidebar #sidebar-content #menu2 li ul li a:hover{color: #ffffff; }
#sidebar #sidebar-content #menu2 li ul{display: none;}#sidebar #sidebar-content #menu2 li ul li{background-image: url('../images/menu_subli.png');}
#sidebar #sidebar-content #menu2 li ul li a{font-size: 11px;}
Can you show me a way to make it work?
You can prevent your first rule to override properties using
menu > li { /* css properties */ }
which will just affect the immediate li's
Or you can also use something like this -
#menu2 ul li { /* write the css again so the override does not happen */ }