Question

the website i am talking about is : http://www.events.elenifrantzi.com/ there are two problems with the second level submenu as you can see. the first is the arrow (i cannot get rid of it) the second is the distance between first level submenu and second. i cannot find anything that it change these two things....

the css for the menu is:

/* side-nav --------------------------------------------------------------------------------*/

#avmenu {
clear: left;
float: left;
width: 70px;
margin: 0;
padding: 0;
font-size: 17px;
}

#avmenu ul {
list-style: none;
width: 70px;
margin: 0;
padding: 0;
}

#avmenu li {
list-style: none;
}

#avmenu li a {
font-weight: 300;
line-height: 1;
text-decoration: none;
color: #7b7b7b;
font-family: "Dosis", Arial, Helvetica, sans-serif;
font-size: 16px;
display: block;
padding: 11px 5px 11px 0;
border-bottom: 1px solid #2a2a2a;
}



#avmenu li#active a,
#avmenu a:hover {
color: #b1b1b1;
background: #1e1e1e;
}

/* Navigation Drop-Down Menu Customization --------------------------------------------------------------------------------*/

#wsite-menus .wsite-menu {
position: relative;
top: 0;
}

#wsite-menus .wsite-menu li a {
padding: 6px 5px 7px -25px;
width: 90px;
background: none;
border: none;
text-decoration: none;
font-family: "Dosis", Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
font-weight: 300;
color: #7b7b7b;
}

#wsite-menus .wsite-menu li a:hover {
color: #b1b1b1;
background: none;
}

and the html:

<div id="main-wrap">
<div id="main">
<div id="avmenu">{menu}</div>
<div id="content">{content}
<div class="clear"></div>
</div>

please help!!! and thank you in advance

Was it helpful?

Solution

for spacing you can try this

.wsite-menu-wrap ul li div.wsite-menu-wrap { left: 111px !important; }

;)

OTHER TIPS

Change submenu width from 200px to 100px (most numbers are hardcoded anyway, so I assume you don't worry about long menu entries)

#weebly-menus .weebly-menu li, #wsite-menus .wsite-menu li {
    ...
    width: 100px;
}

Remove wsite-menu-arrow from HTML, or at least hide it

#wsite-menus .wsite-menu-arrow {
    display: none;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top