CSS (Responsive) Horizontal Dropdown Menu (Alignment)

I am styling a Responsive CSS Horizontal Dropdown Menu (for hours now), and can not get the main menu headings (Directory, Resources, etc) to align left (even) with the logo and content divs. I would also like the submenu headings (Learning & Games) and items (Catch the Bullet, Snoopydoo, etc) to align left (even) with the logo and content divs. - Like I am trying to do with the main headings. --I am trying to get the logo, main menubar heading, and menubar subheading to all align the same left.
(Optional) I am considering on not having the gray menuboard span the whole screen when opened. Not sure if this would look good, but even more unsure how to keep it in the 90% container the menubar is located in.
Here is the site for code:
http://dothopper.com/index.html
Thanks for any help.

Another great tip. Never cease to amaze. Thanks . I uploaded the new CSS with red border and looked at somewhat. It seems very helpful, but like this navbar, I'm gonna have to spend some time with. I think this may help me to figure the problem. This is a really GREAT trick, thanks. If you appen to look at my site, and see anything relevant to getting the element to shift left, let me know.
BTW, crammed some more learning recently (Mostly Dreamweaver, little HTML STructure, and JQuery). Going to try to not use as many divs, (use HTML tags and class selectors). Trying to use captions in my HTML and CSS for organization and understanding. Making copies of all my CSS, JS, and HTML. Set my areas (divs) up as 'section,aside,article,and footer'?--Tried adding metatag info (I think I missed 1 part of the metatag (they wanted a value?). Not sure if my metatagging is correct? Let me know of any advice what I'm doing right/wrong so far.
I taught myself to design using divs like tables somehwat. With the correct way of design (not using alot of divs)..how would I handle this?...
My old page (method), I had several,divs: 3- (content75%) and 3- (image25%) all housed within a div (approx 900px). Content was left, and images right. Total DIV that housed them was 75% of 1232px page? (I think)..The div that housed them was approx 900px (.75x1232). Content approx 675px and image approx 225px wide.
I inseted 480px wide images in that 25% image div and it showed it nicely as approx 225px wide on desktop, and when responsive on mobile, nice full size at 480px. (I think I am/was avoiding having to use alternative images--for each platform-- this way?)
With the correct way of designing (less divs), how would I handle this scenario above? IF I inserted a 480px image into a approx 900px div with no other divs, it would fill the div with a 480px image. IT would then throw my wole design off. I think I'm just missing some HTML/CSS knowledge. Hope this question makes some kind of sense?

Similar Messages

Horizontal Dropdown Menu Buttons DON'T WORK

Any suggestions please?!
I am a novice Flash Developer and I created a horizontal
drowndown menu in Flash with rollover submenus. The dropdown menu
has buttons with Behaviors assigned to "go to webpage". The
published .swf file works fine, links and all. It is only when I
place the menu inside a Dreamweaver DIV that exists over another
image DIV that the buttons don't work. The menu will drop down and
can be rolled over, but it is when I try to click on the buttons to
activate the links that nothing functions.
It is worth mentioning that the buttons have an assigned "Down"
state that doesn't activtate, so I know the buttons are incapable
of even being clicked on. The problem is within Dreamweaver,
not the flash movie menu. Perhaps I am overlooking a widely know
trick to making this work? Am I missing a simple line of HTML??
Anybody have any experience with this?
Greatly Appreciated

Hi,
May I please have the URL of the site and any specific pages you'd like me to take a look at?

Horizontal dropdown menu/css

Have worked out a horizontal menu using css but I'm stuck with the drop down part. There are two areas that drop down, one under Data Entry and the other under Reports. So far the only style used is display: inline;.View the file --> http://classreunionprogram.com/test_css/css.menu.htm
Also get a validation error because of ignorance of how to.Any help is great.
Thanks.

Is this what you had in mind?
http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
NOTE: Pay close attention to how the list mark-up is laid out.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Align select dropdown menu on the right edge of parent box

Hello,
I was wondering if you can help me about an issue i have with Firefox browser.
I'm designing a webpage and i have a "<select>" menu with numerous options.
On Firefox the left edge of the dropdown menu aligns to the left edge of the
parent "<select>" box whereas in other browsers (Chrome, IE) aligns to the right.
The entire menu, is located on the right edge of my page
The result is when the innertext of an option is very long,
exceeds the margins of the page and is cut.
Is there any hidden option (css-fix), so that i could make dropdown menu align to
the right of the parent box , just like other browsers?
(I have some screenshots of the menu, but i don't know where to post them)
Thank you in advance!

Could you post your Screenshot and code.
There is "browse" icon above POST REPLY button, it helps to add your image.

IE 7 - CSS Issues with Spry dropdown Menu *HELP*

I am using a spry horizontal dropdown menu generated in DW. The menus look consistant in all other browsers except ie7 - When the drop down menu occurs they all appear to the right and not directly under its menu item.. Looked around in the Css and i cant seem to find the right rule to make the change in ie7 only... was planning on using a css conditional statement to shift them left.. But im not having any luck.. HELP!
Thanks so much in advance!

Sorry.. Here is the link.. Thanks so much for your willingness to help!
http://soldesign.us/_working/WEBSITE_BoulderPlasticSurgery/index.html

Horizontal tree menu, Java script

Please let me know where can i get Javascript code(not css) for horizontal tree menu. If you have please send the code.
good luck.

ManasaSri wrote:
Please let me know where can i get Javascript code(not css) for horizontal tree menu. If you have please send the code.
good luck.You are confusing JavaScript with Java. The two languages are only vaguely similar. You may want to direct your question to a [Javascript Forum|http://forums.devshed.com/javascript-development-115/]. As this question is unrelated to Java, I will lock this thread.

Dropdown Menu CSS Style

Hi!
I am trying to create a dropdown menu in Dreamweaver. I have watched several tutorials and read many how-to guides and my html looks fine, but editing the style is really throwing me off. I am a beginner to Dreamweaver, so I am unsure of the properties I need to make this right. The code below, when I hover over the first button the dropdown menu goes behind the other two buttons. I need the dropmenu to go off to the side of the buttons and down. If not that, I can align the buttons to go horizontal, so they aren't being covered. I hope that makes sense.
Thank you in advance!!
-M
HTML
<div class="dropdown" id="dropdown" style="text-align: left;">
<ul>
        <li><a href="#">Americas</a>
           <ul>
                   <li><a href="#">Connecticut</a></li>
                    <li><a href="#">Ohio</a></li>
                    <li><a href="#">Vermont</a></li>
                    <li><a href="#">California</a></li>
                    <li><a href="#">Canada</a></li>
                    <li><a href="#">Brazil</a></li>
           </ul>
        </li>
</ul>
<ul>
       <li><a href="#">China</a>
             <ul>
                     <li><a href="#">China</a></li>
               </ul>
        </li>
</ul>
<ul>
        <li><a href="#">Europe</a>
            <ul>
               <li><a href="#">France</a></li>
               <li><a href="#">UK</a></li>
            </ul>
        </li>
</ul>
</div>
STYLE
#dropdown {
margin: 0;
width: 150px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
#dropdown ul {
margin: 0;
padding: 0;
line-height: 30px;
#dropdown li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
#dropdown ul li a {
text-align: center;
height: 30px;
width: 150px;
display: block;
color: #000;
text-decoration: none;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
background: #CCC;
#dropdown ul ul {
position:absolute;
visibility:hidden;
top:32px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
#dropdown ul li:hover ul {
visibility:visible;
position:absolute;
   #dropdown li:hover {
background: #7D92C6;
float: left;
    #dropdown ul li:hover ul li a:hover {
    color:#000;
    background:#7D92C6;
#dropdown a:hover {
color:#000;
background: #7D92C6;
.clearFloat {
    clear:both;
    margin:0;
    padding:0;

Are you doing this as an execise in learning or is it for a real website. I ask because if the latter why not just use a tested and proven commercial product and be done with it? I have used the PVII (http://www.projectseven.com) products for years and can't recommend them highly enough.

Deleted CSS for Horizontal Menu Bar. Help!

I deleted the css for my spry horizontal menu bar and now when I try to upload it into a new page it is distored. I added back the css rules for the menu bar and it helped but I cannot get the menu bar to line up horizontally like it was originally. The bars are vertically staggered across the page. Can anyone help me with the css settings to get the menu bar back to normal?
Thank you
Teresa

Hello Teresa,
we should not resign ourselves. I for my part, I'm very "happy" with my DW, particularly you/we find here many unselfish helpers! What concerns your "way to build website an easier way" I'll propose DW itself (see screenshot of my German DW):
or many of interesting templates (Google is your friend) and here my favorite are these of Nancy O.:
http://alt-web.com/Free-CSS-Templates.shtml.
And I want to reoeat my hints from above:
If you have a budget to work with, look at PVII's Pop-Menu Magic3.
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish (free): http://users.tpg.com.au/j_birch/plugins/superfish/ aso.
Good luck!
Hans-Günter
P.S.
And whether you use DW or other programs, sooner or later you have to become familiar with CSS and html aso.

CSS - Vertical Dropdown Menu

Hey guys.
I need the CSS for a vertical menu much like the one on the
Adobe Homepage under 'Products and
Solutions' where more data is revealed when the title is scrolled
over.
If anybody has links to a tutorial or even have one of these
menus I could possibly have a look at it would be much appreciated.
Cheers in advance.

Hello,
This is a nice CSS dropdown menu tutorial:
http://projectseven.com/tutorials/navigation/auto_hide/index.htm
And another:
http://www.tjkdesign.com/articles/dropdown/
example of menu:
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp
Take care,
Tim
"ForensicBop" <[email protected]> wrote in
message
news:g54p5j$nke$[email protected]..
> Hey guys.
>
> I need the CSS for a vertical menu much like the one on
the Adobe homepage
> under 'Products and Solutions' where more data is
revealed when the title
> is
> scrolled over.
>
> If anybody has links to a tutorial or even have one of
these menus I could
> possibly have a look at it would be much appreciated.
>
> Cheers in advance.
>

Long Vertical CSS dropdown menu goes off screen

Greetings,
I developed a dropdown menu using Spry (Adobe Dreamweaver). It is a vertical menu with multiple sub-menus. Some lists are very long and the menu goes below and off the page.
I found a great example of what I want my menu to do: http://coins.shop.ebay.com/
On the side, it says "Browse By:" and there is a vertical menu. If I shrink the page up vertically a little and watch the sub-menus pop out, I notice they get pushed up if the parent is close to the bottom of the screen, which ensures that none of the options go off the page, they get pushed up.
How can this be done?
Thanks

Have a look here http://pleysier.com.au/mike/
Maybe this is for you.
For the accordion I have used jQuery UI Accordion for Widget Browser which can be found here http://emea-events.wip4.adobe.com/cfusion/exchange/index.cfm?event=ext ensionDetail&loc=en_us&extid=2028523
If you are using DWCS4 or 5, then you can easily incorporate the widget, if not then it is a matter of copying and pasting the code.
Gramps

Recordset order by dropdown menu

Hi all....
I have a results page displaying products based on three different redordsets depending on how the user searches. manufacturer, category or keyword search.
On the results page i also want a dropdown menu with options for displaying the results by price lowest, price highest, manufacturer.
has anyone done this? and how?
Thanks
Andy
PS I'm using Dreamweaver 8.2 and classic asp

Thanks so much for your time and help guys
Here is a live page with a typical search from the category navigation menu
http://www.test4less.co.uk/results3.asp?menuselect=e&CategoryID=28
Here is the page code
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>


<%
Set objCart=new Cart
%>

<% Session("sortby")= Request("sortedby")%>
<%
Dim orderby
If Session("sortby") = "pricelow" Then
orderby = "products.price ASC"
ElseIf Session("sortby") = "pricehigh" Then
orderby = "products.price DESC"
ElseIf Session("sortby") = "manuaz" Then
orderby = "products.manufacturerID ASC"
Elseif sortby="" Then
orderby = "Products.Product, Products.Price DESC"
End If
%>
<%
Dim RSResults__MMColParam
RSResults__MMColParam = "0"
Dim selectstat_MMColParam
If (Request.QueryString("CategoryID") <> "") Then
RSResults__MMColParam = Request.QueryString("CategoryID")
selectstat="SELECT Products.*, Categories.Category FROM Categories INNER JOIN Products ON Categories.CategoryID = Products.CategoryID WHERE Categories.CategoryID = " + Replace(RSResults__MMColParam, "'", "''") + " ORDER BY "
Elseif (Request("ManufacturerID") <> "") Then
RSResults__MMColParam = Request("ManufacturerID")
selectstat="SELECT Products.*, Categories.Category, Manufacturers.Manufacturer FROM (Products INNER JOIN Categories ON Products.CategoryID = Categories.CategoryID) INNER JOIN Manufacturers ON Products.ManufacturerID = Manufacturers.ManufacturerID WHERE Manufacturers.ManufacturerID = " + Replace(RSResults__MMColParam, "'", "''") + " ORDER BY "
Elseif (Request("searchme") <> "") Then
RSResults__MMColParam = Request("searchme")
selectstat="SELECT Products.*, Categories.Category FROM Categories INNER JOIN Products ON Categories.CategoryID = Products.CategoryID WHERE Product LIKE '%" + Replace(RSResults__MMColParam, "'", "''") + "%' ORDER BY "
End If
%>
<%
Dim RSResults
Dim RSResults_numRows
Set RSResults = Server.CreateObject("ADODB.Recordset")
RSResults.ActiveConnection = MM_myconnection
RSResults.Source = selectstat & orderby
RSResults.CursorType = 0
RSResults.CursorLocation = 2
RSResults.LockType = 1
RSResults.Open()
RSResults_numRows = 0
%>
<%
Dim MM_paramName
%>
<%
' *** Go To Record and Move To Record: create strings for maintaining URL and Form parameters
Dim MM_keepNone
Dim MM_keepURL
Dim MM_keepForm
Dim MM_keepBoth
Dim MM_removeList
Dim MM_item
Dim MM_nextItem
' create the list of parameters which should not be maintained
MM_removeList = "&index="
If (MM_paramName <> "") Then
MM_removeList = MM_removeList & "&" & MM_paramName & "="
End If
MM_keepURL=""
MM_keepForm=""
MM_keepBoth=""
MM_keepNone=""
' add the URL parameters to the MM_keepURL string
For Each MM_item In Request.QueryString
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
    MM_keepURL = MM_keepURL & MM_nextItem & Server.URLencode(Request.QueryString(MM_item))
End If
Next
' add the Form variables to the MM_keepForm string
For Each MM_item In Request.Form
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
    MM_keepForm = MM_keepForm & MM_nextItem & Server.URLencode(Request.Form(MM_item))
End If
Next
' create the Form + URL string and remove the intial '&' from each of the strings
MM_keepBoth = MM_keepURL & MM_keepForm
If (MM_keepBoth <> "") Then
MM_keepBoth = Right(MM_keepBoth, Len(MM_keepBoth) - 1)
End If
If (MM_keepURL <> "") Then
MM_keepURL = Right(MM_keepURL, Len(MM_keepURL) - 1)
End If
If (MM_keepForm <> "") Then
MM_keepForm = Right(MM_keepForm, Len(MM_keepForm) - 1)
End If
' a utility function used for adding additional parameters to these strings
Function MM_joinChar(firstItem)
If (firstItem <> "") Then
    MM_joinChar = "&"
Else
    MM_joinChar = ""
End If
End Function
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test4less Electrical & Gas Test Equipment Distributor - Results</title>
<meta name="Description" content="Test4Less - Electrical and Gas testing, calibration, repair and retailer of Fluke, Megger, Kane, Seaward and Socket & See testing equipment. Competitive pricing and customer focussed service. All Products Only £4.95 Delivery" />
<meta name="Keywords" content="Fluke, Megger, Kane, Socket & See, Seaward, Alphatech, Anton, New Technik, Kewtech, Silvertronic, Testmate, TPI, WIS, MFT1552, Fluke 1652, Primetest 100, Fluke 114, PDL 234, VDD12, testing equipment, calibration service, servicing, cleaning, cal lab, Fluke, kane, Megger, calibration days, 16th edition testers, PAT testers, Multimeters, Clampmeters, Test Leads, Environment Testers, Combustion Analysers, Leakage Detectors, Carbon Monoxide Monitors, Differential manometers, Thermometers" />
<meta name="language" content="English" />
<meta name="copyright" content="Acute Sales Ltd" />
<meta name="revisit-after" content="7 days" />
<meta name="Category" content="Testing Equipment" />
<meta name="document-classification" content="Electrical and Gas Tesing Equipment" />
<meta name="document-distribution" content="Global" />
<meta name="document-state" content="Dynamic" />
<meta name="cache-control" content="Public" />
<link href="css/layout/layout.css" rel="stylesheet" type="text/css"/>
<link href="css/menu/menu.css" rel="stylesheet" type="text/css" />
<link href="css/slider/slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/menu.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.anythingslider.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/slider.js"></script>
<script type="text/javascript" src="scripts/rollover.js"></script>

<script type="text/javascript">    var _gaq = _gaq || [];   _gaq.push(['_setAccount', 'UA-458267-1']);   _gaq.push(['_trackPageview']);    (function() {     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);   })(); </script>

</head>
<body>
   
<div id="wrapper">
         
         <div id="header">
   <div id="topnavigation"><p></p>
    </div>
   <div id="socialnet"><a href="http://www.twitter.com/test4less" target="_blank"><img src="assets/img/twitter.gif" alt="follow us on twitter" width="81" height="16" border="0"></a></div>
   <div id="rss"><a href="http://www.test4less.co.uk/xml/test4less.xml" target="_blank"><img src="assets/img/rss_small.gif" alt="rrs feed" width="18" height="18" border="0" /></a></div>
   <br style="clear:both"/>
     <div id="tagline"><p>
       The UK's Premier Online Test Equipment Specialists <span class="h1">0800 040 7477</span></p>
   </div>
     <div id="search">
     <div id="searchbox">
        <form id="searchforum" name="searchforum" method="post" action="results.asp">
                    <input name="searchme" type="text" class="txtbox" id="searchme" />
                    <input name="Submit" type="submit" class="txtbox_button" value="search" />
                   </form>
       </div>
      </div>
   <br style="clear:both"/>
   <div id="logo"><img src="assets/img/logo.gif" alt="Test4Less" width="243" height="76"></div>
    <div id="account">
     <div id="guest">
     <p>
       
</p>
      </div>
     <div id="account_dets">
     <p>  </p>
     </div>
    </div>
    <br style="clear:both"/>
</div>

<div id="menu">
<div id="manufacturerDD">
    
</div>
</div>
   


<div id="leftmain">
<div id="searchvar"> You searched for:
<% If Request("ManufacturerID")<>"" Then %>
<%=(RSResults.Fields.Item("Manufacturer").Value)%>
<% Else If Request("CategoryID")<>"" Then %>
<%=(RSResults.Fields.Item("Category").Value)%>
<% Else If Request("searchme")<>"" Then %>
<% Response.Write Request("searchme") %>
<% End If %>
<% End If %>
<% End If %>
<% Dim SortFormAction
SortFormAction= MM_keepURL
%>
<div id="sortby">
<form action="results3.asp" method="get" name="formsort" id="formsort">
    <h5>
      <label>
        <select name="sortedby" class="sortbydrop" id="sortedby" value="sortby" onchange='this.form.submit()'>
          <option>sort by ::</option>
          <option value="pricelow">Price: Lowest First</option>
          <option value="pricehigh">Price: Highest First</option>
          <option value="manuaz">Manufacturer: A-Z</option>
          <option value="http://www.google.com">goto</option>
        </select>
        </label>
    </h5>
</form>
</div>
</div>
<div class="prod_dk">
    <%
startrw = 0
endrw = HLooper1__index
numberColumns = 4
numrows = -1
while((numrows <> 0) AND (Not RSResults.EOF))
startrw = endrw + 1
endrw = endrw + numberColumns
%>
<%
While ((startrw <= endrw) AND (Not RSResults.EOF))
%>
<div class="prod_dk_block">
       <div class="prod_dk_photo"><a href="details.asp?<%= Server.HTMLEncode(MM_keepURL) & MM_joinChar(MM_keepURL) & "ProductID=" & RSResults.Fields.Item("ProductID").Value %>"><img src="products/<%=(RSResults.Fields.Item("Image").Value)%>" width="142" height="142" border="0" /></a></div>
     <div class="prod_dk_title"><%=(RSResults.Fields.Item("Product").Value)%></div>
    <div class="prod_dk_button"><a href="details.asp?<%= Server.HTMLEncode(MM_keepURL) & MM_joinChar(MM_keepURL) & "ProductID=" & RSResults.Fields.Item("ProductID").Value %>" class="prod_dk_buttontxt"><%= FormatCurrency((RSResults.Fields.Item("Price").Value), 2, -2, -2, -2) %></a></div>
    </div>
    <%
startrw = startrw + 1
RSResults.MoveNext()
Wend
%>
<%
numrows=numrows-1
Wend
%>
<% If RSResults.EOF And RSResults.BOF Then %>
<div id="noresults"> Sorry, nothing was found. Please try again</div>
<% End If ' end RSResults.EOF And RSResults.BOF %>
</div>
<p>
<%'Response.Write(Session("sortby"))%>
</p>
<p>
<%'Response.Write "results.asp?"& "&" & (Session("searchtype")) %>
</p>
<p>
<%'Response.Write(Session("searchtype"))%>
<p>
<p>
<p>
Keep Both:
<%Response.Write "results.asp?"& MM_keepBoth %>
<p>Keep URL:
    <%Response.Write MM_keepURL %>
<p>Keep FORM:
    <%Response.Write MM_keepFORM & Request("sortedby") %>
</div>


<div id="rightmain">
    <div id="basket">
     <div id="baskettop">
       <p><a href="shoppingcart.asp">shopping basket</a>
     </div>
     <div id="basketmid"><p>
     <%if IsObject(objCart) then%>
     <%=objCart.TotalNumberItems%> Item(s)<br>
     £<%= FormatNumber(objCart.SubTotal, 2, -2, -2, -2) %> total<%end if%> <br /><br />
       <a href="login.asp">checkout</a></div>
     <div id="basketbot"></div>
    </div>
<div id="marquee_panel">
     <div id="marqueetop">
   <p>test4less | <a href="news_full.asp">NEWS</a>
     </div>
     <div id="marquee">
      <%=sMarquee%>
   </div>
      <div id="marquee_bottom"></div>
</div>
   <div id="prod_focus_panel">
   <a href="details.asp?ProductID=1386"><img src="assets/img/focus.jpg" alt="Test4Less Weekly Promotions" width="230" height="228" border="0" /></a>   </div>
   <div id="promotions"><a href="promotions.asp"><img src="assets/img/promotions.jpg" alt="Test4Less Weekly Promotions" width="230" height="228" border="0" ></a></div>
   <div id="training"><a href="http://www.severncollege.co.uk/test4less" target="_blank"><img src="assets/img/training.jpg" alt="Test4Less Training Corses" width="230" height="228" border="0" ></a></div>
</div>
   
   
   <div id="footer">
      <div id="footer1"></div>
      <div id="subscription">
    <form action="http://www.eshotuk.co.uk/eshot/form.php?form=86" method="post" name="frmSS86" id="frmSS86">
     <div>
       <label>
       <input name="email" type="text" class="subscription_txtbox" id="email" maxlength="50" />
       </label>
       <label>
       <input name="Submit2" type="submit" class="subscription_button" value="Submit" />
       </label>
      </div>
     </form>
          Why not subscribe to our mailing list and receive money saving promotions?
    <div id="pricematch_box">
    <div id="pricematch_icon"><a href="pricematch.asp"><img src="assets/img/price_match.gif" alt="Price Match" width="93" height="63" border="0" ></a></div>
    <div id="pricematch_txt">Test4Less offers a 100% Price Match Guarantee on selected products. </div>
    </div>
     </div>
</div>
<div id="companyreg">
    <p>Registered office: Acute sales Ltd, 4 Century Road, High Carr Business Park, Newcastle-under-Lyme, Staffordshire, ST5 7UG </p>
      Test4Less is a Trading Division of Acute Sales Ltd,
      Tel: 0800 0407477,
      Fax: 01782 567095,
      E-mail: [email protected] <br />
      Registered in England and Wales Number 2529960<br />
      VAT Number GB536921139 <br />
        © 2011 Acute Sales Ltd</div>
<div id="footer_cc">
<p><img src="assets/img/credit_cards.gif" alt="We accept" width="411" height="31" /></p>
<p> </p>
<p align="right"><a href="http://www.paypoint.net/assets/downloads/techFAQS/customermessage/cust_message.pdf" target="_blank"><img src="assets/img/secpay_logo2.gif" alt="Secured By payPoint" width="188" height="21" border="0" /></a></p>
</div>
<br style="clear:both"/>
   
</div>
   
</body>
</html>
<%
Set objCart=Nothing
%>
<%
RSResults.Close()
Set RSResults = Nothing
%>

Horizontal dropdown menubar - Vertical dropdown menubar

Hi,
I would need help to turn a horizontal dropdown menubar to a vertical dropdown menubar. I am not experienced with CSS so don't know how to change code correctly. I would like to get submenu going vertically beside main menu.
http://www.villalotus.net/TEST/test.htm
Thanks in advance!

Thank you Ken!
Unfortunately I didn't find help from tutorials. I manged to turn menu vertically but submenu goes on top of main menu.
/*main nav*/
nav {
          margin-left: auto;
          margin-right: auto;
ul {
          padding: 0;
          margin: 0;
nav ul {
          list-style: none;
          font-weight: bold;
          font-size: 20px;
          margin: 5px;
          width: 180px;
nav ul ul {
          display: none;
          margin: 0px;
          padding: 0px;
nav ul li {
           position: relative;
nav ul a {
          display: block;
          width: 160px;
          text-align: center;
          text-decoration: none;
          color: #fff;
          border: 1px solid #004c99;
          border-radius: 8px;
          margin-right: auto;
          margin-left: auto;
          padding-top: 5px;
          padding-right: 9px;
          padding-bottom: 5px;
          padding-left: 9px;
nav ul a:active       {
          background: rgba(255,255,255,0.4);
          color: #FFF;
nav ul li a:hover, ul a:focus {
          text-decoration: none;
          background-color: #6699cc;
          color: #FFFFFF;
nav ul a:link, nav ul a:visited {
          background: rgba(255,255,255,0.2);
          color: #FFFFFF;
nav ul li a {
          margin-top: 0px;
nav ul ul li {
            position: relative;
nav ul ul li a {
          color: #fff;
          margin: 0px;
nav ul ul li a:hover {
          background: #6699cc;
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
          background-color: #3370AD;
nav ul li:hover {
          margin-top: 0px;
nav ul li:hover> ul{
          display: block;
          position: relative;
nav ul:after {
          content: "";
          clear: both;
          display: block;
Message was edited by: Karonaful

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

How to apply CSS to a BC menu

Hi there,
I have done a lot of reading, gone to BC gurus, looked at Liam's post on Web Menu V2and I am still stumped on this one. The BC gurus tutorial and Liams' item were way above my head.
How do you apply CSS you have written to a BC menu?
I have set up a BC menu and put items in it. The menu type is CSS (HTML) Only
The menu items have a name, a page link Item Height of 30 and .menuLeft in the Item CSS Class Name
The template the menu is on is responsive and linked to a stylesheet with the CSS code below in it.
The menu is completely unaffected by the CSS in the stylesheet. All menu items have a dot in front of them, and look like the default link style for the site.
So the CSS below is not having any affect on the menu items. Why is this?
What basic, simple step have I missed here?
How do I get the menu in BC to notice the CSS below?
I have also tried making the CSS into an id #menuLeft and putting that into the Item ID Name field in each menu item. The CSS is still completely ignored. Why? (anguished cry)
.menuLeft {
          list-style-type: none;
.menuLeft ul{
          list-style-type: none;
          padding: 5px;
          margin: 0px;
          line-height: 30px;
          border: thin solid #CCCCCC;
          border-radius: 3px;
          text-decoration: none;
.menuLeft li a:link {
          color: #3F823D;
          text-decoration: none;
.menuLeft li a:visited {
          text-decoration: none;
          color: #999999;
          background-color: #B9E09A;
.menuLeft li a:hover {
          color: #999999;
          text-decoration: underline;
          background-color: #B9E09A;
.menuLeft li a:active {
          color: #999999;
          text-decoration: none;
          background-color: #B9E09A;

Hi Liam,
The class is definitely .menuLeft and that is what is showing in the code. However, for the menu, only the line height set in the backend of BC is showing. All other styling in the CSS is ignored. By the way I have to have two CSS stylesheets as this is a responsive design using CCDW. You have to use a separate stylesheet to style body, links, headers and other items. I have done this in eternityfonts.css which is where the styling for the menu is. The webpage is using all other instructions from the eternityfonts.css file, including headers, links etc, but it is ignoring the menu styling.
TEST PAGE SHOWING THE MENU NOT WORKING
Here is the test page where I am trying to style the menu. http://eternitycosmetics.businesscatalyst.com/test
It is linked to these stylesheets:
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" /> BC standard stylesheet with all sites
<link href="../boilerplate.css" rel="stylesheet" type="text/css"> DW CC stylesheet that comes with fluid design
<link href="/stylesheets/eternity4.css" rel="stylesheet" type="text/css"> DW CC stylesheet that accompanies the fluid design - the fluid design will break if I edit this stylesheet manually
<link href="/stylesheets/eternityfonts.css" rel="stylesheet" type="text/css"> stylesheet containing body bground, header, a link and other manual styles for the site. I can edit this stylesheet manually
CODE RENDERING ON THE PAGE
Here is the code on the page for the menu in question when I do view source. It appears to be ignoring the .menuLeft code in eternityfonts.css and just looks at the setup in the BC menu.
<div id="leftMenu" class="fluid"> (this div is in the DWCC generated stylesheet that I cannot touch called /stylesheets/eternity4.css)
<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script>
<div id="cat_673629_divs">
<ul id="nav_673629">
<li class=".menuLeft" style="height:30px;"><a href="/index.htm">Home</a></li> (this class is in the /stylesheets/eternityfonts.css stylesheet that I can edti)
<li class=".menuLeft" style="height:30px;"><a href="/about-us">About Us</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/products">About Our Products</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/impact-cosmetics">Products Online</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/anti-aging-treatments">Anti-aging Treatments</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/acne-treatments">Acne Treatments</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/doctor-services">Doctor Services</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/testimonials">Testimonials</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/contact-us">Contact Us</a></li></ul></div>
<script type="text/javascript">catSetSelectedCSSItem('nav_673629');</script>
</div>
BC MENU SETUP SCREEN
Here is the BC setup screen showing that I have applied the class of .menuLeft to the menu items:
CSS CODE THAT IS BEING IGNORED WHEN THE PAGE IS DISPLAYED
Here is the code in eternityfonts.css that is not being applied to the CSS menu. I have bolded the code that is not being actioned in the BC CSS/HTML menu.
WHY IS THIS CODE BEING IGNORED?
What step have I missed here?
Full dump of code in eternityfonts.css
@charset "utf-8";
/* CSS Document */
body,td,th {
          font-family: Arial;
          font-size: 12px;
          color: #000;
          font-style: normal;
          font-weight: 400;
body {
          background-color: #FFFFFF;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(178,221,145,1.00)),color-stop( 100% , rgba(255,255,255,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(178,221,145,1.00) 0%,rgba(255,255,255,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(178,221,145,1.00) 0%,rgba(255,255,255,1.00) 100%);
          background-repeat: no-repeat;
a {
          color: #3F823D;
          text-decoration: none;
a:visited {
          color: #3F823D;
          text-decoration: none;
a:hover {
          color: #3F823D;
          text-decoration: underline;
a:active {
          color: #3F823D;
          text-decoration: none;
h1 {
          font-size: 20px;
          color: #3F823D;
h2 {
          font-size: 18px;
          color: #FF7546;
h3 {
          font-size: 16px;
          color: #3F823D;
h4 {
          font-size: 14px;
          color: #FF7546;
#buyButton2 {
          width: 100px;
          margin-top: 10px;
          padding-top: 5px;
          padding-bottom: 5px;
          text-align: center;
          border: thin solid #CC6600;
          border-radius: 3px;
          background-color: #FFAC77;
          float: right;
#buyButton1 {
          width: 100px;
          margin-top: 10px;
          padding-top: 5px;
          padding-bottom: 5px;
          text-align: center;
          border: thin solid #CC6600;
          border-radius: 3px;
          background-color: #FFAC77;
.menuLeft {
          list-style-type: none;
.menuLeft ul{
          list-style-type: none;
          padding: 5px;
          margin: 0px;
          line-height: 30px;
          border: thin solid #CCCCCC;
          border-radius: 3px;
          text-decoration: none;
.menuLeft li a:link {
          color: #3F823D;
          text-decoration: none;
.menuLeft li a:visited {
          text-decoration: none;
          color: #999999;
          background-color: #B9E09A;
.menuLeft li a:hover {
          color: #999999;
          text-decoration: underline;
          background-color: #B9E09A;
.menuLeft li a:active {
          color: #999999;
          text-decoration: none;
          background-color: #B9E09A;
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
.menu ul{
height:50px;
list-style:none;
margin:0;
padding:0;
.menu li ul{
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
.menu li:hover ul{
display:block;

Horizontal Spry Menu appears as bullet point list in IE8 and below - fine in firefox, chrome and IE9

This one is breaking my brain! I have an horizontal spry menu bar in my website that renders correctly in all browsers except ie 8 and below where it appears like an unordered list - almost like no CSS had been applied at all. You can check out the site here http://www.webhance.com.au. The spry css looks like this:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 130%;
cursor: default;
width: auto;
float:right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: 150px;
float: right;
text-align:center;
font-family:"AvantGarde Bk BT";
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 150px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 150px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border-right: 1px solid #9fe2fd;
text-align:center;
font-family:"AvantGarde Bk BT";
background-color:#4c859d;
color:#FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
border-right: 1px solid #9fe2fd;
display: block;
cursor: pointer;
background-color: #4c859d;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #4c859d;
color: #9cc9a0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #4c859d;
color: #9cc9a0;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
float: left;
background: #FFF;
The HTML for the section looks like this:
<div class="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" id=button1>Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
    <ul>
      <li><a href="design.html">Web Design</a>        </li>
      <li><a href="maintenance.html">Web Maintenance</a></li>
      <li><a href="social.html">Social Media</a></li>
    </ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a>    </li>
</ul>
</div>
I really really need some help - hope someone out there can point me in the right direction :-)
Julie

Hi Gramps - thanks for getting back to me - I took advantage of your advice to others with some other issues I had and they worked a charm so I was really hoping to hear from you :-)
Unfortunately removing media="only screen and (min-width: 769px) from the css call didn't resolve the problem. Check it out on my index page www.webhance.com.au/index.html Any other ideas?
Cheers, Julester

CSS (Responsive) Horizontal Dropdown Menu (Alignment)

Similar Messages

Maybe you are looking for