Hello, I haven't done web design in years and i'm working on a project and ran into a weird CSS issue. I am hoping someone can assist with this. Below is the code. I am using MS Expression. When I save the page and open it with any browser, the first menu item is ok the second one is placed directly under the first and the third and forth are double spaced. Ill attach a screen shot as well. Thanks if you can help. <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #8b8b8b; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> ========================================================== Here is the menu Items <div class="dropdown"> <span>Menu</span> <div class="dropdown-content"><p align="left">Item 1<br>Item 2</br><br>Item 3</br><br>Item 4</br></p></div></div>
Apart from MS Expression, the problem is the double breaks after "Item2" and "Item3": <div class="dropdown"> <span>Menu</span> <div class="dropdown-content"><p align="left">Item 1<br>Item 2</br><br>Item 3</br><br>Item 4</br></p></div></div> Code (markup):
I am retarded. It is Expression was telling me to close those tags. I didn't think you had to. Thanks I appreciate it.
I am using it for the editor portion and other little tools. Its been a long time just need to get it done. Thanks for the suggestion though. That doesn't look right to me. They look too close not. Is there a better way these days to do a menu? Would a list work better?
If you have time for another questions here is the menu portion of it. DO you have any idea how to change the length so it doesnt span the entire width of the page. Also is there a way to add a background image to the main bar? I tried to add background: url("curveleft.png"); to the following It didnt work. Thanks if you have some more time to teach an idiot #cssmenu { height: 37px; display: block; border: 1px solid; border-radius: 5px; width: auto; border-color: #080808; margin: 0; padding: 0; background: url("curveleft.png"); background-size: cover; } ============================================================================ Main css #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { border: none; line-height: 1; margin: 0; padding: 0; } #cssmenu { height: 37px; display: block; border: 1px solid; border-radius: 5px; width: auto; border-color: #080808; margin: 0; padding: 0; } #cssmenu > ul { list-style: inside none; margin: 0; padding: 0; } #cssmenu > ul > li { list-style: inside none; float: left; display: inline-block; position: relative; margin: 0; padding: 0; text-align: left; } #cssmenu.align-center > ul { text-align: center; } #cssmenu.align-center > ul > li { float: none; margin-left: -3px; } #cssmenu.align-center ul ul { text-align: left; } #cssmenu.align-center > ul > li:first-child > a { border-radius: 0; } #cssmenu > ul > li > a { outline: none; display: block; position: relative; text-align: center; text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); font-weight: 700; font-size: 13px; font-family: Arial, Helvetica, sans-serif; border-right: 1px solid #080808; color: #ffffff; padding: 12px 20px; } #cssmenu > ul > li:first-child > a { border-radius: 5px 0 0 5px; } #cssmenu > ul > li > a:after { content: ""; position: absolute; border-right: 1px solid; top: -1px; bottom: -1px; right: -2px; z-index: 99; border-color: #3c3c3c; } #cssmenu ul li.has-sub:hover > a:after { top: 0; bottom: 0; } #cssmenu > ul > li.has-sub > a:before { content: ""; position: absolute; top: 18px; right: 6px; border: 5px solid transparent; border-top: 5px solid #ffffff; } #cssmenu > ul > li.has-sub:hover > a:before { top: 19px; } #cssmenu > ul > li.has-sub:hover > a { padding-bottom: 14px; z-index: 999; border-color: #3f3f3f; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div { display: block; } #cssmenu > ul > li.has-sub > a:hover, #cssmenu > ul > li.has-sub:hover > a { background: #3f3f3f; border-color: #3f3f3f; } #cssmenu ul li > ul, #cssmenu ul li > div { display: none; width: auto; position: absolute; top: 38px; background: #3f3f3f; border-radius: 0 0 5px 5px; z-index: 999; padding: 10px 0; } #cssmenu ul li > ul { width: 200px; } #cssmenu ul ul ul { position: absolute; } #cssmenu ul ul li:hover > ul { left: 100%; top: -10px; border-radius: 5px; } #cssmenu ul li > ul li { display: block; list-style: inside none; position: relative; margin: 0; padding: 0; } #cssmenu ul li > ul li a { outline: none; display: block; position: relative; font: 10pt Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); margin: 0; padding: 8px 20px; } #cssmenu, #cssmenu ul ul > li:hover > a, #cssmenu ul ul li a:hover { background: #3c3c3c; background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222)); background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: linear-gradient(top, #3c3c3c 0%, #222222 100%); } #cssmenu > ul > li > a:hover { background: #080808; color: #ffffff; } #cssmenu ul ul a:hover { color: #ffffff; } #cssmenu > ul > li.has-sub > a:hover:before { border-top: 5px solid #ffffff; }
What is that "curveleft" meant to do? Just make a curved border / wrapping for the list? And image would help there. Other news: in the edit-box on this page, there is a code-button (or, rather, there is an insert-button, where you can chose "code" - please, for the love of god, use it?). That CSS is a mess, and I'm pretty sure it can be condensed quite a bit - would you mind creating a jsfiddle or something like that? Makes it easier to edit and show the changes done...
Sorry I wont post it like that again. Honestly its this menu below. There is just so much black space to the right I want to do something with it. http://cssmenumaker.com/menu/css3-drop-down-menu