Enhance your website with a multi-column Pure CSS drop-down menu

Can anyone help me with this issue I'm facing? I am struggling to add a second column to the main "Authorized Brands" menu, and when I tried to break it up, it affected the rest of the columns due to the width being set at 1000px.

This is the code I have been working with:

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: block;
  position: relative;
  float: left;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  padding: 6px 13px 6px 13px;
  background: #666666;
  white-space: nowrap;
}

ul li a:hover {
  background: #3b3b3b;
  color: #D3AE76;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #3b3b3b;
}

li:hover li a:hover {
  background: #999999;
}
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="images/goldnavline.jpg"><img src="images/goldnavline.jpg" width="1" height="1"></td>
  </tr>
  <tr>
    <td bgcolor="#666666">
      <ul id="menu">
        <li><a href="#">AUTHORIZED Watch Brands</a>
          <ul>
            <li><a href="#">Alain Silberstein Watches</a></li>
            <li><a href="#">Armin Strom Watches</a></li>
            <li><a href="#">Artya Watches</a></li>
            <li><a href="#">Audemars Piguet Watches</a></li>
            <li><a href="#">Ball Watches</a></li>
            <li><a href="#">Bell & Ross Watches</a></li>
            <li><a href="#">Blancpain Watches</a></li>
            <li><a href="#">Bovet Watches</a></li>
            <li><a href="#">Breguet Watches</a></li>
            <li><a href="#">BRM Watches</a></li>
            <li><a href="#">Corum Watches</a></li>
            <li><a href="#">DeWitt Watches</a></li>
            <li><a href="#">Dodane Watches</a></li>
            <li><a href="#">Franck Muller Watches</a></li>
            <li><a href="#">Girard Perregaux Watches</a></li>
            <li><a href="#">Glashutte Original Watches</a></li>
            <li><a href="#">Graham Watches</a></li>
            <li><a href="#">Hautlence Watches</a></li>
            <li><a href="#">H. Moser & Cie Watches</a></li>
            <li><a href="#">Hublot Watches</a></li>
            <li><a href="#">Jaquet Droz Watches</a></li>
            <li><a href="#">Linde Werdelin Watches</a></li>
            <li><a href="#">Muhle Glashutte Watches</a></li>
            <li><a href="#">Omega Watches</a></li>
            <li><a href="#">Parmigiani Fleurier Watches</a></li>
            <li><a href="#">Perrelet Watches</a></li>
            <li><a href="#">Romain Jerome Watches</a></li>
            <li><a href="#">Speake-Marin Watches</a></li>
            <li><a href="#">Strom Watches</a></li>
            <li><a href="#">Urwerk Watches</a></li>
          </ul>
        </li>
        <li><a href="#">PRE-Owned Timepieces</a>
          <ul>
            <li><a href="#">PRE-OWNED Timepieces $5000 and Below</a></li>
            <li><a href="#">PRE-OWNED Timepieces $5000 to $10000</a></li>
            <li><a href="#">PRE-OWNED Timepieces $10000 to $15000</a></li>
            <li><a href="#">PRE-OWNED Timepieces $15000 and Up</a></li>
          </ul>
        </li>
        <li><a href="#">CLEARANCE Timepieces</a></li>
        <li><a href="#">Timepiece Accessories</a>
          <ul>
            <li><a href="#">Orbita Watch Winders</a></li>
            <li><a href="#">Kubik Watch Winders</a></li>
          </ul>
        </li>
        <li><a href="#">Trade In YOUR Timepiece</a></li>
      </ul>
    </td>
  </tr>
  <tr>
    <td background="images/goldnavline.jpg"><img src="images/goldnavline.jpg" width="1" height="1"></td>
  </tr>
</table>

Answer №1

customize your dropdown menu like this:

ul li ul{
position:fixed;
top:50px;
left:0;
background-color:#fff;
border:1px solid #ccc;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to continuously execute the 'onclick' function using AJAX inside a specific ID?

My challenge involves implementing a new AJAX upload feature to insert a data element from the onClick event in multiple rows. The issue I am facing is that it works fine for the first row, but when I add subsequent rows, the function no longer works upon ...

Tips for including or excluding a series of comma-delimited values from an input

HTML <div class="wrap_temi"> <ul class="list-inline list-unstyled"> <li class="list-inline-item"> <input type="checkbox" value="amici" autocomplete="off"> Amici </li> <li class="lis ...

select2 with customizable multi-column layout

Looking to create a multi-column select2 with a dynamic number of columns by specifying the number of columns as a data attribute in the select tag, or utilizing another method. <select data-cols="2,6,4"> <!--note data-cols--> < ...

``There seems to be an issue with Firefox's background position percentage

After combining multiple images into one to reduce HTTP requests, I utilized background-position in percentage values to control which image was displayed. Since the width of the images is dictated by the parent element, using percentages rather than pixel ...

Changing the font-family to 'Symbol' and using Windows-1252 character encoding

I have a collection of HTML documents that contain basic text encoded in Windows-1252, but scattered throughout the content are various instances of span elements styled with font-family: Symbol. For instance: <span style='font-family:Symbol& ...

"Explore the dropdown options on the Twitter Bootstrap menu by hovering your cursor

Is there a way to modify the code so that when hovering over a dropdown menu created with Twitter Bootstrap 3, the menu expands and users are able to click on the expanded links? The HTML code I came up with is as follows: <nav> ...

Showing a numerical value in the bottom-right corner alongside a backdrop of an image

I am attempting to create a container that measures 26x26 pixels and showcases a number at the bottom right corner of this container. Furthermore, I want to include a 24x24 picture as the background of the container. The code I have written so far is disp ...

Steps for loading a new page by clicking an input button:

I'm looking for some help with a basic issue I'm having while customizing a WordPress plugin. I want to redirect the user to the thankyou.php page when they click on the place_order button. I tried changing the input value to thankyou.php, but it ...

Conceal the div once it reaches the top of the webpage

Is there a way to hide an "h1" element when its parent div reaches the top of the page and then show it again when it moves down using both JQuery and CSS? I attempted to utilize a scroll listener in JQuery to toggle a class, but this resulted in the "h1" ...

Issue with function operation

Incorporating HTML code with Angular elements on the homepage of a PHP forum script has been challenging. I have inserted the PHP code into index.template.php as instructed, but unfortunately, nothing is being displayed. <?php /** * This function ...

blending the transition from dark image to black background

Utilizing the CSS below: #divPic { height: 32pc; background-image: url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg'); background-repeat: no-repeat; background-position: left center; b ...

Issues with zoom functionality not functioning properly within IE11

I am currently developing an application with Angular that is designed to be compatible with tablets and touch-enabled devices. One of the key features I want to implement is the ability for users to zoom/scale up the app, especially for those with visual ...

Exploring the world of CSS font families in Sublime Text 3 and linking them to the web

Is there a way to connect a font from the internet (such as those on Google Fonts: ) to my Sublime Text CSS file? I have tried linking it to an HTML file that is already linked to my CSS code, but it hasn't been successful. ...

Instructions on how to make a radio button selected when clicked are as follows:

My radio button is currently checked, but I would like it to be onclicked because there is a Javascript function that uses the on.click function. Are there any possible methods or examples to achieve this? <label style="margin-left:177px;">Order Ty ...

Determine the height of the left div, which is set to auto, and apply the same height to the right div, which has overflow set

I am facing an issue that needs a solution. I need to ensure that two div elements have the same height. The left div should have 'auto' height while the right one must match it. Moreover, the right div contains 14 nested divs that need to be scr ...

Padding on a flex item nudges a neighboring flex item out of place

Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes ...

Automating the process of uploading a file to a Github repository using JavaScript and HTML

Recently, I've been tinkering with updating a file in my GitHub repository using code to set up an automated system for pushing changes without manual intervention. My approach involved creating a function that utilizes a GitHub access token to ' ...

Tips for designing a HTML form using classes

I need help styling this form using CSS because I have similar areas like a search submit button that require different classes. Any assistance would be greatly appreciated. <perch:form id="contact" method="post" app="perch_forms"> <perch:cont ...

I have a specific resolution in mind where I want to run jQuery code during window scrolling

I have a jQuery code that I want to run only when the resolution is greater than 950px. If not, I risk losing the responsive logo. My goal is to create a navigation bar similar to the one on the Lenovo homepage. $(document).ready(function(){ //left ...

Extracting information from an HTML table with Jsoup

Currently, I am attempting to utilize jsoup in order to parse an HTML table. As a newcomer to jsoup, I have taken the time to review some tutorials on how it operates. My objective is to retrieve values from each column within this specific website's ...