Floating vertical menu intersecting with horizontal navbar

For my latest project, I decided to include a menu in the index.html view:

      <table>
        <tr class="logo">
          <td><img src="#" alt="logo"/></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
      </table>

This particular menu is positioned within a horizontal navbar like so:

<header>
  <ul>
    <li>...</li>
    <li><a href="#">blablabla</a></li>
    <li><a href="#">blablabla</a></li>
    <li><a href="#">blablabla</a></li>
  </ul>
</header>

I am looking to have this menu float over the navbar similar to the image provided below:

https://i.sstatic.net/E9977.jpg

If anyone has a solution on how to achieve this effect, please let me know!

Here is the CSS style currently applied to the table:

table {
  z-index: 1;
}

table > tr.logo {
  width: 280px;
  height: 480px;
  background-color: #A9A9A9;
}

table > tr.menu {
  background-color: #DCDCDC;
}

table > tr.menu:hover {
  background-color: #C0C0C0;
}

table > tr.menu > a {
  text-decoration-color: #FAEBD7;
  font-family: 'Special Elite', cursive;
}

table > tr.menu:hover > a {
  text-decoration-color: #FFFAF0;
}

You can view the code on jsfiddle here: https://jsfiddle.net/klebermo/09br9e5p/

UPDATE

I attempted to update the code to eliminate the use of tables and achieved this result: https://jsfiddle.net/klebermo/09br9e5p/2/

htmlcss

Answer №1

Check out this updated version on JSFiddle

I've streamlined the CSS by removing unnecessary styles. One important selector that was missing is:

header ul ul{
/* Your styles here */
}

Next time, please provide clearer details in your question. It was quite challenging to understand your requirements. I hope this revised code aligns more closely with what you're looking for.

Answer №2

Rather than placing your image inside <td></td>, create a new element and insert the image inside that.

@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono|Special+Elite|Luckiest+Guy|Slabo+27px|Open+Sans);

html, body {
  margin:0;
  padding:0;
}

header {
  top: 0;
  left: 0;
  background-color: #333;
  width:100%;
}

header:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

// Rest of the CSS code remains the same

  <body>
    <header>
    <ul>
  <li><img class="logo" src="#" alt="logo"></li>
        <li>
          <table>
            <tbody>
              
            <tr class="menu">
              <td><a href="#">blablabla</a></td>
            </tr>
            // Rest of the HTML code remains the same
          </tbody></table>
        </li>
      </ul>
    </header>
    <main>
      <article>
      </article>
    </main>
  </body>

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

Tips for positioning three child divs horizontally within a parent div with flexible dimensions and arranging each one separately

Is there a way to stack three divs horizontally within a fluid-width container div, with each child div scaling proportionally when the browser is resized for responsive design? The left-most div should be on the left, the middle div centered, and the righ ...

htmlcssresponsive-designfluid-layout

Set the color of the text in the Material UI pagination component to a subtle shade

I would like to customize the color of the text in Material UI's pagination component. Specifically, I want the action button to be white and the text portion to be grey, similar to the left action arrow in the image below. Is there a way for me to ac ...

cssreactjsbootstrap-4material-uireact-with-styles

Extracting text sizes from HTML and CSS

Struggling to extract the font size of text sections from an HTML page. Despite exploring python libraries like cssutils and beautiful-soup, my efforts have been fruitless so far. My homemade html parser only captures font sizes within the html itself, n ...

pythonhtmlcssweb-scraping

Adjust the size of text using JavaScript to display as an image

Is there a way to adjust the size of a div with text by specifying a width and height so that it fills up the designated area, similar to how an image does when you set its dimensions? I'm looking to take any given width and height values and stretch ...

javascriptimagehtmlresize

The directory structure does not align with the 301 redirect

I recently transitioned my website from HTML to a CMS platform. The new CMS does not include any file extensions in the URLs, so I have maintained the same URL structure from my old HTML site. Here is an example of the difference: HTML site URL: www.sit ...

phphtml.htaccesshttp-redirect

Embed PHP file

This is my first venture into website development using php. I thought I had come up with a clever way to include the css sheet based on the file location. One example is when I submit a form with this code: $root = '../'; function died($err ...

phphtmlcss

Manage Raspberry Pi through a local website

Seeking guidance on creating a system where pressing a button on a webpage triggers a signal to a raspberry pi. For example, clicking on button1 on my laravel-built website initiates operation1 on the raspberry pi side, which will be using a .Net App. An ...

html.nettcpraspberry-pi

Tips for modifying a singular line within a file using Java

After creating a Java program that enables users to generate a .html file for a website by inputting content into an array, I am now considering adding a feature that allows users to edit an existing css file. Specifically, I am thinking about offering us ...

javahtmlcss

Increasing the padding at the top of the logo when scrolling down the page

When scrolling down the page, there seems to be extra padding above the logo that is throwing off the alignment with the rest of the site. I've been trying different solutions to correct this issue: //$('.navbar-brand').css({ 'padding- ...

javascriptjqueryhtmlcsstwitter-bootstrap

concealing components during screen adjustments

There are 3 identical <div>s available: <div class="box">Hello World!</div> <div class="box">Hello World!</div> <div class="box">Hello World!</div> I need these <div>s to ...

htmlcssbootstrap-4

HTML - Transition an image to a short video on hover

Currently, I am attempting to create a dynamic list of images where hovering over one of the images triggers a short video to play. Think of it as similar functionality to what you see on Youtube - when you hover over an image, it switches to a brief video ...

htmlcss

Is it possible to align a row so that it is centered based on one of the columns in the row?

Calling all experts in CSS and HTML: Let's say I have 3 columns in a row, each with a different size (refer to the image). Now, picture this - I want to center the 2nd column right in the middle of my page. If I simply use justify-content: center to ...

htmlcssangularbootstrap-5

Resize the shape of an image's polygon

Is there a way to independently scale a specific polygon of an image on hover? For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering. I am familiar with us ...

javascriptjqueryhtmlcssimage

The floating label effect will be removed when the required attribute is removed as well

Is there a method to achieve a floating label effect in Bootstrap 4 even after removing the "required" attribute from the input field? $(document).ready(function() { $('.form-group input').on('focus', function() { $(this).sibli ...

javascripthtmljquerycssbootstrap-4

Organize icons within a container that spans the entire height

I am looking to organize multiple icons within a container that spans the entire height of the website, rather than just the viewport. Currently, I am only able to achieve the height of the viewport using the following code: .full-container { posit ...

htmlcss

Seeking assistance with HTML coding to incorporate an image into a website

I am currently customizing a pre-written code to finalize my project. The project involves a game where a snake eats an apple and grows in size. One of the tasks I need to complete is replacing the red blob, representing the apple in the game, with an imag ...

htmlcanvas

The process of setting up React in the terminal becomes tricky when the VS code editor is directing to a non-existent path

Issue with VS Code editor not recognizing existing path Recently attempted to install React using the npx command in the terminal, following steps from various tutorials on YouTube. Despite trying all suggested methods, the installation didn't succee ...

javascripthtmlcssnode.jsreactjs

Update the displayed number on the input field as a German-formatted value whenever there is a change in the input, all while maintaining

In German decimal numbers, a decimal comma is used. When formatting, periods are also used for grouping digits. For example, the number 10000.45 would be formatted as 10.000,45. I am looking to create an input field (numeric or text) where users can input ...

javascripthtmlinputsvelte

Locating an individual element using Selenide (Selenium) and the cssSelector method

If you have a structure of elements similar to the one shown in the image, it is possible to extract each static property using: $$('#static-information .value').get(0) or $$('.static-property .value').get(0) However, as each static p ...

cssselenium-webdriverelementselenide

Ensure that the Footer spans the entire width of the screen by using a container with fluid width, while

What is the best way to ensure that my Footer spans the full width of the browser window? Note: My website uses Bootstrap, with the Footer utilizing 'container-fluid' while the page content utilizes 'container'. Live link: HTML < ...

htmlcsstwitter-bootstrap